ExtJS 创建动态加载树
2024-08-24 07:44:09
Ext 中导航树的创建有两种方式:1、首先将所有的数据读出来,然后绑定到前台页面。2、每点击一个节点展开后加载子节点。在数据量比较小的时候使用第一种方式加载的会快一些,然而当数据量比较大的时候,我还是建议使用第二种方式的。这里我就来介绍一下第二种树的展示方式。
源码奉上:
//创建model
Ext.define("treeModel",{
extend:"Ext.data.Model",
fields:["OUID","OUName"]
})
//创建Store
var treeStore=Ext.create("Ext.data.TreeStore",{
model:"treeModel",
proxy:{
type:"ajax",
url:"treeHandler.ashx",
extraParams:{pid:0}
},
listeners:{
beforeexpand:function(node)
{
this.proxy.extraParams.pid=node.raw.OUID;
}
},
autoLoad:true
});
//创建树
var tree=Ext.create("Ext.tree.Panel",{
store:treeStore,
userArrows:true,
rootVisible:false,
name:"OUID",
displayField:"OUName",
valueField:"OUID",
listeners:{
itemclick:function(view,rec)
{
}
}
})
至此我们的一个动态树的前台页面就创建好了。
接下来我们需要做的就是在后台进行数据的处理,然后以json的格式发送给前台。
public string GetTree(int pid)
{
string json =string.Empty;
DataTable dt=tree;
5 json=JsonConvert.SerializeObject(dt);
return json;
}
注:参数 pid 是每次点击树的节点展开之后,向后台传递的当前节点的ID,这里作为子节点的父节点使用。
在将数据转换为json格式的时候我这里采用了Newtonsoft 中的序列化函数,它可以讲List,IList,DataTable 直接转换为json的格式。
最新文章
- SharpPcap网络包捕获框架的使用--实例代码在vs2005调试通过
- Apache Thrift 服务开发框架学习记录
- asp.net 计算两个时间差
- php异步调试和线上调试网站程序的方法
- http的无状态无连接到底是什么含义
- 第十九章——使用资源调控器管理资源(2)——使用T-SQL配置资源调控器
- IOS设计模式学习(6)生成器
- css 控制横向布局,超出隐藏,滚动
- 用node.js启动mock.js
- TCP 选项RST
- range的新发现
- 加载 AssetBundle 的四种方法
- docker安装指定版本TAG的镜像
- Tomcat7 新的数据库连接池Tomcat jdbc pool介绍和配置
- ZJOI2018 round^2 游记
- Hyperledger Fabric 1.2 --- Chaincode Operator 解读和测试(一)
- HUB、SPAN、TAP比较
- [转] .net软件反编译笔记
- chrome浏览器Network面板请求Timing分析
- web框架引入
热门文章
- Cocos2d-x 3.x部署到安卓
- linux管理员切换与管理员密码第一次设置
- ubuntu12.04 安装 ruby1.9.3
- PHP Warning: phpinfo(): It is not safe to rely on the system's timezone setting
- HDU 5492(DP) Find a path
- 利用Azure Redis Cache构建百万量级缓存读写
- 转载 50种方法优化SQL Server数据库查询
- Learning Docker--chapter 1
- Non-unique Elements
- 深入浅出Node.js (6) - 理解Buffer