jQuery MiniUI

标题: Tree：加载列表数据 [打印本页]

作者: fcrong 时间: 2012-3-17 15:54:57 标题: Tree：加载列表数据

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 时间: 2012-7-5 20:48:04

针对这个情况，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 时间: 2012-7-6 19:29:17

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

作者: caicai0328 时间: 2012-7-7 12:33:58

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

作者: niko 时间: 2012-7-7 17:59:04

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

作者: SSTech 时间: 2013-2-28 17:59:06

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

作者: niko 时间: 2013-2-28 22:04:37

是的。

作者: ying2058 时间: 2013-5-17 17:04:34

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

作者: factory 时间: 2013-5-17 17:14:38

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

treegrid和tree不支持分页

作者: zhinly 时间: 2013-6-7 17:34:58

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

作者: factory 时间: 2013-6-8 09:32:49

zhinly 发表于 2013-6-7 17:34
请问一下，同理是不是gridData 也可以用上面相同的方法去做。主要是javascript的形式，因为我现在的做的是 ...

grid有setData()方法
tree和treegrid有loadData(树形data)和loadList(列表data, idField, parentField)

其他控件的请参考具体的API

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)