ExtJS 4.2 JSON 分层数据的树形表示答案

【问题标题】：ExtJS 4.2 Tree representation of JSON hierarchical dataExtJS 4.2 JSON 分层数据的树形表示
【发布时间】：2016-02-24 15:41:03
【问题描述】：

我有以下分层 JSON。我应该如何对其建模以便它可以表示为树。 products 数组与 bookFamilies 处于同一级别。请任何人提供一些帮助。

我关注了这个fiddle.sencha

https://fiddle.sencha.com/#fiddle/9vi 它不适用于 4.2。而且我不知道如何重组来带来产品。

{
"Families" : [
   {
        "FamilyName" : "FICAsia",
        "bookFamilies" : [
           {
                "name" : "Ndf\/Nds Nja",
                "book" : ["3782"]
            }
        ],
        "products" : ["CorpZC", "CorpInfl", "CorpFix", "CorpFlt"]
    },  
    {
        "FamilyName" : "FICUStandard",
        "bookFamilies" : [{
                "name" : "Local Markets Nja",
                "book" : ["3787", "3785"]
            }, {
                "name" : "Ndf\/Nds Pwja",
                "book" : ["3782"]
            }
        ],
        "products" : ["Drawdown", "Xorward", "FXY", "wap", "Top"]
    }
]

}

我正在考虑重组 JSON，但不确定如何处理产品以便可以将其表示为树。

【问题讨论】：

标签： json tree extjs4.2

【解决方案1】：

默认情况下，对于每个树节点：

“文本”是树中将显示的内容。可以通过编辑树面板的 displayField 属性将其更改为不同的字段（如您链接的小提琴中所做的那样）。但是，4.2 中似乎没有此功能。
"leaf" 表示项目是否可以展开（默认为 true）。您要确保在孩子上设置了此项，否则在尝试打开它们时会出现奇怪的行为。
"expanded" 表示项目/父项是否扩展（默认为 false）。如果在叶节点上将此设置为 true，则不会发生任何事情。
“children”为其余关系打开递归层次结构。

关于你链接的小提琴的一些棘手的事情：

transform 函数接受传入的请求并解析为 javascript 对象，并且是“数据”参数。当您需要对数据进行一些转换时，这很方便。在这种情况下，您会看到他们使用“items”键并将其变成“children”。
“rootProperty”在 ExtJS 4.2 中是私有变量，但在 ExtJS 中是公共变量>5

请务必查看文档以了解 ExtJS 4.2 中的其他功能。小心 ExtJS 5,6 文档，因为它看起来好像添加/删除了很多东西。

http://docs.sencha.com/extjs/4.2.2

这是您之前列出的部分示例 json。用这个替换“data”属性，删除“rootProperty”和“transform”属性，删除“displayField”属性，并将版本设置为ExtJS 4.2.1。

{
   "children":[
      {
         "text":"FICAsia",
         "children":[
            {
               "text":"Book Families",
               "children":[
                  {
                     "text":"Ndf\/Nds Nja",
                     "children":[
                        {
                           "text":"3782",
                           "leaf":"true"
                        }
                     ]
                  }
               ]
            },
            {
               "text":"Products",
               "children":[
                  {
                     "text":"CorpZC",
                     "leaf":"true"
                  },
                  {
                     "text":"CorpInfl",
                     "leaf":"true"
                  },
                  {
                     "text":"CorpFix",
                     "leaf":"true"
                  },
                  {
                     "text":"CorpFlt",
                     "leaf":"true"
                  }
               ]
            }
         ]
      }
   ]
}

【讨论】：