ExtJS 創建動態加載樹

Ext 中導航樹的創建有兩種方式：1、首先將所有的數據讀出來，然后綁定到前台頁面。2、每點擊一個節點展開后加載子節點。在數據量比較小的時候使用第一種方式加載的會快一些，然而當數據量比較大的時候，我還是建議使用第二種方式的。這里我就來介紹一下第二種樹的展示方式。

源碼奉上：

//創建model
Ext.define("treeModel",{
　　extend:"Ext.data.Model",
　　fields:["OUID","OUName"]
})
//創建Store
var treeStore=Ext.create("Ext.data.TreeStore",{
 　　model:"treeModel",
　　 proxy:{
　　　　type:"ajax",
　　　　url:"treeHandler.ashx",
　　　　extraParams:{pid:0}
　　},
　　listeners:{
　　　　beforeexpand:function(node)
　　　　{
　　　　　　this.proxy.extraParams.pid=node.raw.OUID;　　
　　　　}
　　},
　　autoLoad:true
});
//創建樹
var tree=Ext.create("Ext.tree.Panel",{
　　 store:treeStore,
　　 userArrows:true,
　　 rootVisible:false,
　　 name:"OUID",
    displayField:"OUName",
    valueField:"OUID",
　　listeners:{
　　　　itemclick:function(view,rec)
　　　　　　{
　　　　　　　　　　
　　　　　　}
　　}
})

 

至此我們的一個動態樹的前台頁面就創建好了。

接下來我們需要做的就是在后台進行數據的處理，然后以json的格式發送給前台。

public string GetTree(int pid)
{
　  string json =string.Empty;
　　DataTable dt=tree;
5　　 json=JsonConvert.SerializeObject(dt);
　　return json;
}

注：參數 pid 是每次點擊樹的節點展開之后，向后台傳遞的當前節點的ID，這里作為子節點的父節點使用。

在將數據轉換為json格式的時候我這里采用了Newtonsoft 中的序列化函數，它可以講List，IList，DataTable 直接轉換為json的格式。