參考示例:懶加載樹
創建代碼
<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>
服務端返回數據
[{
id: "form",
text: "Form",
......
isLeaf: false, //是否葉子節點:+和-號
expanded: false //節點處于收縮狀態
},
......
]
其中,isLeft 說明此節點是否有下一級節點。expanded 表示此節點處于折疊狀態。
懶加載事件
當用戶點擊"+"圖標時,會自動加載下一級節點,此時會把當前節點id傳遞到后臺,也可以攔截加載事件,增加額外屬性:
function onBeforeTreeLoad(e) {
var tree = e.sender; //樹控件
var node = e.node; //當前節點
var params = e.params; //參數對象
//可以傳遞自定義的屬性
params.myField = "123"; //后臺:request對象獲取"myField"
}
服務端處理
服務端通過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);