ExtJS 创建动态加载树
浏览数：48 /
时间：2015年06月09日
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的格式。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
