ExtJS 4.2 JSON分层数据的树表示

时间:2016-02-24 15:41:03

标签: json tree extjs4.2

我有以下分层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但不确定如何处理这些产品,以便它可以表示为树。

1 个答案:

答案 0 :(得分:1)

默认情况下,对于每个树节点:

  • “text”将在树中显示。通过编辑树面板的displayField属性,可以将其更改为其他字段(在您链接的小提琴中完成)。但是,它看起来不像4.2中的这个功能。
  • “leaf”表示是否可以展开项目(默认为true)。您希望确保在子项上设置此项,否则在尝试打开它们时会出现奇怪的行为。
  • “expanded”表示项目/父项是否展开(默认为false)。如果在叶节点上将此参数设置为true,则不会发生任何事情。
  • “children”打开其余关系的递归层次结构。

关于你联系的小提琴的一些棘手的事情:

  • 转换函数接收传入请求并解析为javascript对象,并且是“data”参数。当您需要对数据进行一些转换时,这很方便。在这种情况下,您会看到他们使用“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"
                  }
               ]
            }
         ]
      }
   ]
}