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的格式。