jQuery MiniUI 开发教程 树形控件 树形：懒加载树（五）

[b]懒加载树[/b]
[img]http://www.miniui.com/docs/api/images/lazytree.gif[/img]

参考示例：[url=http://www.miniui.com/demo/tree/lazytree.html]懒加载树[/url]

[b]创建代码[/b]

<ul id="tree1" class="mini-tree" url="../data/TreeService.aspx?method=LoadNodes" style="width:300px;height:200px;padding:5px;"
showTreeIcon="true" textField="name" idField="id" onbeforeload="onBeforeTreeLoad">
</ul>

[b]服务端返回数据[/b]
[{
id: "form",
text: "Form",
......
isLeaf: false, //是否叶子节点：+和-号
expanded: false //节点处于收缩状态
},
......
]
其中，isLeft 说明此节点是否有下一级节点。expanded 表示此节点处于折叠状态。

[b]懒加载事件[/b]
当用户点击"+"图标时，会自动加载下一级节点，此时会把当前节点id传递到后台，也可以拦截加载事件，增加额外属性：

function onBeforeTreeLoad(e) {
var tree = e.sender; //树控件
var node = e.node; //当前节点
var params = e.params; //参数对象

//可以传递自定义的属性
params.myField = "123"; //后台：request对象获取"myField"
}

[b]服务端处理[/b]

服务端通过request获取"id"属性后，加载此节点的下一级节点数组，并通过JSON返回。
String id = Request["id"];
if (String.IsNullOrEmpty(id)) id = "-1";

//获取下一级节点
String sql = "select * from plus_file where pid = '" + id + "' order by updatedate";
ArrayList folders = DBUtil.Select(sql);

//判断节点，是否有子节点。如果有，则处理isLeaf和expanded。
for (int i = 0, l = folders.Count; i < l; i++)
{
Hashtable node = (Hashtable)folders[i];
String nodeId = node["id"].ToString();

String sql2 = "select * from plus_file where pid = '" + nodeId + "' order by updatedate";
ArrayList nodes = DBUtil.Select(sql2);

if (nodes.Count > 0)
{
node["isLeaf"] = false;
node["expanded"] = false;
}

}

//返回JSON
String json = PluSoft.Utils.JSON.Encode(folders);
Response.Write(json);