Question

是vaadin的新蜜蜂。我必须在Grid / Table（vaadin）中显示来自JSON文件（从MySQL数据库获取）的数据。如果JSON采用以下格式，我可以在表格中显示数据。

[
{
"id": "ex-wardrobe",
"productId": "ex-wardrobe",
"name": "exWardrobe",
"desc": "Some description",
"dimension": "WxDxH 148\" X 24\" X 112\" ",
"category": "Bedroom",
"subcategory": "Wardrobe",
"categoryId": "bedroom",
"subcategoryId": "wardrobe",
"tags": "all, Space Design Bedroom, Space Details Wardrobe",
"designer": "hb",
"curr": "INR",
"popularity": "1",
"relevance": "1",
"shortlisted": "1",
"likes": "1",
"createDt": "",
"pageId": "ex-wardrobe",
"styleName": "Fresh",
"styleId": "cfresh",
"priceRange": "Premium",
"priceId": "premium",
"defaultPrice": "123",
"defaultMaterial": "MDF ",
"defaultFinish": "LAMINATE"
  }
]

但是，如果我以下面的格式获得JSON（数据与同一产品相关），则无法在表格中添加数据。

[
 {
 "id": "ex-wardrobe",
"productId": "ex-wardrobe",
"name": "exWardrobe",
"desc": "Some description",
"dimension": "WxDxH 148\" X 24\" X 112\" ",
"category": "Bedroom",
"subcategory": "Wardrobe",
"categoryId": "bedroom",
"subcategoryId": "wardrobe",
"tags": "all, Space Design Bedroom, Space Details Wardrobe",
"designer": "hb",
"curr": "INR",
"popularity": "1",
"relevance": "1",
"shortlisted": "1",
"likes": "1",
"createDt": "",
"pageId": "ex-wardrobe",
"styleName": "Fresh",
"styleId": "cfresh",
"priceRange": "Premium",
"priceId": "premium",
"defaultPrice": "123",
"defaultMaterial": "MDF ",
"defaultFinish": "LAMINATE",
"mf": [
  {
    "basePrice": "123",
    "material": "MDF ",
    "finish": "LAMINATE"
  }
],
"images": [
  "066___ex_WARDROBE_Dim.jpg",
  "067___ex_WARDROBE_close_door.jpg",
  "068___ex_DOVE_dim.jpg"
],
"components": [],
"accessories": []
 }
 ]

这是用于在表格中显示JSON数据的代码，

    Table grid = new Table();
    root.addComponent(grid);
    grid.setStyleName("iso3166");
    grid.setPageLength(6);
    grid.setSizeFull();
    grid.setSelectable(true);
    grid.setMultiSelect(false);
    grid.setImmediate(true);
    grid.setColumnReorderingAllowed(true);
    grid.setColumnCollapsingAllowed(true);
   try {
       JSONArray products = productsDataProvider.getCatalogs();
        JsonContainer dataSource = 
       JsonContainer.Factory.newInstance(products.toString());
        grid.setContainerDataSource(dataSource);
        grid.setColumnReorderingAllowed(true);
       grid.setWidth("98%");
        grid.addStyleName(ChameleonTheme.TABLE_STRIPED);
    } catch (IllegalArgumentException ignored) {

    }
    grid.setWidth("100%");
    grid.setHeight("100%");
    root.addComponent(grid);

我坚持这个，我在这个晚上度过了一个不眠之夜。百万吨的提前感谢。我希望你们GURU可以帮助我：）

Answer 1

抱歉没有vaadin专家。第一次看到并喜欢它。我想你的问题是你对象里面的数组。我的意思是：

"mf": [
  {
    "basePrice": "173881",
    "material": "MDF ",
    "finish": "LAMINATE"
  }
],
"images": [
  "066___ex_WARDROBE_Dim.jpg",
  "067___ex_WARDROBE_close_door.jpg",
  "068___ex_DOVE_dim.jpg"
],
"components": [],
"accessories": []

不知道组件应如何显示。你有没有mf，图像，组件和配件试过吗？

Answer 2

您使用的是非常简单的JSONContainer。从source code可以看出，此实现不支持嵌套/复合元素和数组。

首先，您必须问自己这些复杂对象是如何显示的（UX），尤其是“mf”字段。

<强>更新

简单的复合对象（如"simpleCompound": {"name": "foo", number: 123}）可以显示在表列中（您使用的JSONContainer不支持，但BeanItemContainer提供了类似的功能，因此请查看如何实现这个功能）。

从UX的角度来看，阵列字段更成问题。大多数情况下，此信息仅在需要时或在单独的面板中显示。 Vaadin Grid组件提供了显示详细信息视图的可能性，请参阅the wiki。也许这符合您的要求。

Answer 3

目前不支持嵌套的json数据，除非您为此创建自己的高级模板。目前有一个online json container application demo用于测试数据是否真的是json或json数组但是没有嵌套。然后它在网格表中显示该数据。因此，您可以使用它来验证您的数据。

您还可以在github

上获取包含源代码的应用程序模板

在vaadin中以网格显示JSON数据

3 个答案: