ExtJS 创建动态加载树

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:true
21 });
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的格式。