Tree：加载列表数据

fcrong

Tree控件，需要提供一个树形的JSON数据，才能正常显示。

通常，开发者在后台可以这样做：
1）从数据库查询出一个列表数据
2）在后台，将列表数据转换为树形数据
3）通过JSON方式返回
在前台页面，可以给Tree设置url地址，或者调用load方法加载树形数据。

后台的“列表转树形”是一个相对有点小难度的实现。
针对这个情况，MiniUI Tree提供了一种直接加载列表数据，Tree内部进行数据转换的方式。
1）从数据库查询出一个列表数据
2）通过JSON方式返回
省略了原来的第2个步骤。

如何实现呢？
只需要给Tree设置3个属性：valueField、parentField、resultAsTree。

valueField通常是id，表示节点对象的唯一标识符。
parentField通常是pid，表示父节点属性。
resultAsTree是关键，要设置成"false",这样Tree通过url加载数据后，就会得知需要做一些“列表转树形”的处理，从而正确显示。

参考示例：
    列表数据生成Tree：http://miniui.com/demo/tree/list2tree.html

liyang1987ly

针对这个情况，MiniUI Tree提供了一种直接加载列表数据，Tree内部进行数据转换的方式。
1）从数据库查询出一个列表数据
2）通过JSON方式返回
省略了原来的第2个步骤
这个不太明白 能具体点吗
后台返回怎么样的数据啊
[
{ id:"miniui",text:"miniui",expanded: true,
children[
        {id: "base", text: "Base", expanded: false,
                children: [
                        {id: "ajax", text: "Ajax", url: "../../docs/api/ajax.html", target:"_blank"},
                        {id: "json", text: "JSON", url: "../../docs/api/ajax.html", target:"_blank"}                       
                ]
        },
        {id: "forms", text: "Forms", expanded: false,
                children: [
                        {id: "button", text: "Button", url: "../../docs/api/button.html", target:"_blank"},
                        {id: "listbox", text: "ListBox", url: "../../docs/api/listbox.html", target:"_blank"},
                        {id: "checkboxlist", text: "CheckBoxList", url: "../../docs/api/checkboxlist.html", target:"_blank"},
                        {id: "radiolist", text: "RadioList", url: "../../docs/api/radiolist.html", target:"_blank"}
                ]
        }
        ]}
]
不需要在后台封装成这样的吗？

niko

不需要。
请参考教程：
http://www.miniui.com/docs/tutorial/tree_list.html

caicai0328

能不能把数据从后台取回来，在调用loadData 加载进去呢？
我尝试了下子，怎么不行呢？我是想把url取回来的数据中，拿出自己需要的那一部分，加载到树上去的？？

niko

如果你一定要JS方式创建tree，请参考：
http://www.miniui.com/demo/#src=tree/createtree.html
其中的第三种创建方式。

SSTech

在后台把数据查询出来后，要怎么才能转成JOSN的数据啊？是不是只是通过Test.JSON.Encode(Hashtable)就可以了啊

niko

是的。

ying2058

我想在 lazytree 懒加载TreeGrid 里面添加分页 一直没有找到方法 就指点

factory

ying2058 发表于 2013-5-17 17:04
我想在 lazytree 懒加载TreeGrid 里面添加分页 一直没有找到方法 就指点

treegrid和tree不支持分页

zhinly

请问一下，同理是不是gridData 也可以用上面相同的方法去做。主要是javascript的形式，因为我现在的做的是前面一个项目的前台重构。之前用的是Extjs 现在要换成是JSP，也就是说后台现在不能变了，只以在前面的js里去做适配。