最近在做一个ext的项目,刚开时学ext,做一个树形显示列表,要求异步加载,在网上找了好久都没找到一个完整的例子,后来自己慢慢的研究终于搞出来了,js代码如下:
//定义树的加载器
var treeloader = new Ext.ux.tree.TreeGridLoader({
url : "listTreeXzqh.do"
});
//定义treegrid
var treeGrid = new Ext.ux.tree.TreeGrid({
title : '行政区划管理',
id : "xtgl005LT",
autoScroll : true,
autoHeight : true,
border : false,
animate : true,
enableDD : true,
rootVisible : false,
containerScroll : true,
columns : [ {
header : '行政区划名称',
dataIndex : 'xzqhmc',
width : 250
}, {
header : '行政区划代码',
dataIndex : 'xzqhdm',
width : 200
}, {
header : '行政区划简称',
dataIndex : 'xzqhjc',
width : 200
}, {
header : '行政区划级别',
dataIndex : 'xzqhjb',
width : 200,
renderer : function(n) {
if (n == '1') {
return "省、自治区";
} else if (n == '2') {
return "市、州";
} else if (n == '3') {
return "县";
} else if (n == '4') {
return "乡镇";
} else if (n == '5') {
return "村";
}
}
}, {
header : '乡镇类型',
hidden : true,
dataIndex : 'xzlx'
} ],
loader : treeloader
//绑定加载器
});
// 异步加载根节点
var rootnode = new Ext.tree.AsyncTreeNode({
id : '0',
text : '中华人民共和国行政区划代码',
draggable : false,// 根节点不容许拖动
expanded : true
});
//设置节点属性
rootnode.attributes = {
xzqhjb : '0',
xzqhdm : '0'
};
// 为tree设置根节点
treeGrid.setRootNode(rootnode);
// 响应加载前事件,传递node参数
treeGrid.on('beforeload', function(node) {
var xzqhjb = xzqhjb = node.attributes["xzqhjb"];
var xzqhdm = node.attributes["xzqhdm"];
treeGrid.loader.dataUrl = "./xtgl/listTreeXzqh.do?xzqhjb=" + xzqhjb
+ "&xzqhdm=" + xzqhdm; // 定义子节点的Loader
}, treeloader);
每次点击节点都会到后台查询子节点 后台返回的json数据为:
[{xzqhdm:'110000000000',xzqhmc:'北京市',xzqhjc:'北京市',xzqhjb:'1',xzqhjbmc:'',leaf:false},{xzqhdm:'120000000000',xzqhmc:'天津市',xzqhjc:'天津市',xzqhjb:'1',xzqhjbmc:'',leaf:false},{xzqhdm:'130000000000',xzqhmc:'河北省',xzqhjc:'河北省',xzqhjb:'1',xzqhjbmc:'',leaf:false},{xzqhdm:'140000000000',xzqhmc:'山西省',xzqhjc:'山西省',xzqhjb:'1',xzqhjbmc:'',leaf:false},{xzqhdm:'150000000000',xzqhmc:'内蒙古自治区',xzqhjc:'内蒙古自治区',xzqhjb:'1',xzqhjbmc:'',leaf:false}]
效果图:
图见附件
- 大小: 9.9 KB
分享到:
相关推荐
### Ext.ux.tree.TreeGrid 异步加载知识点详解 #### 一、Ext.ux.tree.TreeGrid简介 在ExtJS框架中,`Ext.ux.tree.TreeGrid`组件是一种结合了树形结构与表格显示特性的控件,适用于展示具有层级关系的数据。通过...
6. **AJAX通信**:EXT通过AJAX与服务器进行异步通信,使用HTTP GET或POST请求来获取或提交数据。在EXT TreeGrid中,分页请求通常是通过Store的load方法触发的。 7. **部署与运行**:将开发完成的EXT应用程序(包括...
- 为了提高响应速度,可以使用虚拟滚动和异步加载技术。 8. **错误处理与调试**: - 使用ExtJS提供的日志和调试工具来追踪和修复可能出现的错误。 - 通过审查浏览器的开发者工具,检查网络请求和DOM结构,找出...
文章中提到的“小改动”,具体是指通过编写JavaScript代码在客户端实现TreeGrid的初始化,而非依赖于异步加载数据的方式。作者通过定义一个根节点,并将其设置为TreeGrid的根节点,再通过递归函数appendChild将JSON...
4. 异步加载(Lazy Loading):EXT Tree支持延迟加载,即只有在节点被展开时才加载其子节点数据,这样可以显著减少初次加载的时间。 5. 树形网格(TreeGrid):EXT还提供了结合了表格和树结构的TreeGrid组件,可以...
4. **数据绑定**:将后台获取到的数据绑定到表格中,可以通过Ajax异步加载或直接写入HTML。 5. **事件处理**:监听并处理用户的交互行为,如点击展开、编辑保存等。 在解压后的"gridtable"文件中,应包含这个插件的...
4. **动态加载数据**:对于拥有大量数据的树,可以使用异步加载,即当节点被展开时才请求其子节点数据。这可以通过设置`TreeStore`的`async`属性和配置`proxy`来实现。 5. **自定义节点模板**:如果需要自定义节点...
TreeNode用于静态树,而AsyncTreeNode则支持动态异步加载,通常与服务器端交互,接收JSON数据动态生成节点。对于小数据量,一次性生成所有节点是可行的,而对于大数据量,逐级加载更为合适。本文主要关注一次性生成...
- 使用`async`配置项启用异步加载,配合`load`事件处理。 - `nodeParam`指定哪个字段作为加载子节点的标识。 7. **TreeGrid**:结合Grid组件,可以在同一视图中同时展示表格和树结构的数据。 8. **拖放功能...
**GXT (Ext GWT)** 是基于GWT的一个扩展库,提供了更多的UI组件和皮肤,尤其是桌面级应用风格的组件,如数据网格、图表和各种布局。GXT使得开发者能够构建更加美观且功能丰富的Web界面,同时保持GWT的开发效率和跨...