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: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,动态加载)