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/) Powered by Discuz! X2