ExtJS 建立動態載入樹

標籤：style   blog   io   color   ar   使用   sp   for   資料   

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

源碼奉上：

 1 //建立model 2 Ext.define("treeModel",{ 3 　　extend:"Ext.data.Model", 4 　　fields:["OUID","OUName"] 5 }) 6 //建立Store 7 var treeStore=Ext.create("Ext.data.TreeStore",{ 8  　　model:"treeModel", 9 　　 proxy:{10 　　　　type:"ajax",11 　　　　url:"treeHandler.ashx",12 　　　　extraParams:{pid:0}13 　　},14 　　listeners:{15 　　　　beforeexpand:function(node)16 　　　　{17 　　　　　　this.proxy.extraParams.pid=node.raw.OUID;　　18 　　　　}19 　　},20 　　autoLoad:true21 });22 //建立樹23 var tree=Ext.create("Ext.tree.Panel",{24 　　 store:treeStore,25 　　 userArrows:true,26 　　 rootVisible:false,27 　　 name:"OUID",28     displayField:"OUName",29     valueField:"OUID",30 　　listeners:{31 　　　　itemclick:function(view,rec)32 　　　　　　{33 　　　　　　　　　　34 　　　　　　}35 　　}36 })

 

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

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

1 public string GetTree(int pid)2 {3 　  string json =string.Empty;4 　　DataTable dt=tree;5　　 json=JsonConvert.SerializeObject(dt);6 　　return json;7 }

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

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

ExtJS 建立動態載入樹