由Ext提供的treeGrid需要通过dataUrl或者loader去加载数据,可是如果数据为静态的,在页面上生成的,那就无法显示,为了解决这个问题,需要重写loader的几个方法,具体如下,
loader : new Ext.ux.tree.TreeGridLoader({
loadData: function (node, callback, scope) {
var o = obj.data; //真正的数据在这里
node.beginUpdate();
for(var i = 0, len = o.length; i < len; i++){
var n = this.createNode(o[i]);
if(n){
node.appendChild(n);
}
}
node.endUpdate();
this.runCallback(callback, scope || node, [node]);
},
handleFailure : function(response){
var a = response.argument;
this.loadData(a.node, a.callback, a.scope);
},
dataUrl : '${pageContext.request.contextPath}/treegrid.json'
})
效果如下
- 大小: 25.8 KB
分享到:
相关推荐
在Web应用开发中,特别是涉及到复杂数据展示的应用场景中,`Ext TreeGrid`是一种非常实用且灵活的数据展示组件,它结合了树形结构与表格的形式来呈现数据,非常适合展示具有层次关系的数据集合。本文主要探讨如何...
本文详细介绍了如何使用ExtJS中的`Ext.ux.tree.TreeGrid`组件实现异步加载功能,包括前端配置和后端数据处理两个方面。通过这种方式可以有效提升用户体验,同时减轻服务器的压力。在实际开发过程中,还需要根据具体...
Ext TreeGrid是一款在Ext JS框架下开发的组件,它结合了Tree和Grid的优点,提供了一种既能展示层次结构数据又能进行表格样式的显示和操作的视图。在Ext JS库中,Tree通常用于展现层级关系的数据,而Grid则用于显示二...
开发者可以利用EXT的API文档和示例代码来学习如何配置和使用这个组件,实现各种自定义功能,如添加新的编辑类型、定制编辑行为、实现远程数据同步等。 为了充分利用TreeGridEditor v1.3.2,开发者需要对EXT的事件...
TreeGrid是一种特殊的表格展示形式,它结合了树形结构和表格数据的优点,使得在单一的视图中可以同时展示层次关系和多列数据。在Web开发中,TreeGrid常用于组织和显示具有层级关系的数据,如目录结构、组织架构、...
标题“extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面”直接指出本文内容的重点在于使用Ext JS 3.31版本的TreeGrid组件加载静态页面中的JSON数据。描述部分简要介绍实现这一功能是作者对现有功能的小改进,...
标题"SSH+Easyui之TreeGrid树形展现数据"表明我们要讨论的是如何在SSH框架下利用EasyUI的TreeGrid组件来展示层次结构的数据。TreeGrid是一种结合了表格和树形结构的组件,它可以在同一视图中展示数据的层级关系,这...
TreeStore是ExtJS中的一个数据存储类,它负责加载和管理树形数据。你需要定义数据模型(Model),包含节点的属性,以及数据源(store configuration),这可以是JSON对象数组或者其他格式的数据。例如: ```...
jqGrid是一款功能强大的JavaScript表格插件,用于在网页上展示并操作数据,它支持各种操作,包括数据的加载、排序、搜索以及分页等。在这个"jqgrid加载本地数据并且分页例子"中,我们将深入探讨如何利用jqGrid实现从...
4. 数据加载:数据可以静态写入,也可以动态加载。静态加载时,直接在`data`选项中设置数据;动态加载则需要配置URL,TreeGrid会自动发送请求获取数据。数据格式通常是JSON,包含`id`、`parent`(父节点ID)和可选的...
2. **加载数据到TreeGrid**:当服务器返回数据后,我们需要将这些数据加载到TreeGrid中。EasyUI提供了`treegrid('loadData', data)`方法来实现这一点。在上面的代码示例中,我们接收到的`data`参数是服务器返回的...
2. 懒加载策略:TreeGrid中的懒加载是指在用户展开节点时才加载该节点下的子数据,而不是一次性加载所有数据。这样可以避免初次加载时的数据量过大,提高初始渲染速度。当用户滚动或展开新节点时,后台动态获取并...
数据增加属性 state:closed, 即可默认收起,反之展开,需再展开时,将加载的data数据中的state属性变更,再重新执行 $('#tg').treegrid('loadData', data); 即可实现,亲测有效 无卡顿 注:无子项的请勿加state...
4. 调用TreeGrid的方法来加载数据和进行其他操作,如展开、折叠节点等。 配置选项可以调整TreeGrid的行为,比如`treeColumn`指定树形结构显示的列,`loadonce`用于一次性加载所有数据,`expandCol`和`indent`则控制...
在EASYUI TreeGrid中,异步加载数据是一项重要的功能,允许用户在需要时动态获取数据,提高应用的性能和用户体验。 异步加载数据通常涉及到以下几个关键点: 1. **配置URL**:在TreeGrid的初始化参数中,`url`属性...
感谢 Ericzhen 远离颠倒梦想,蕴籍无上清凉 这里引用它的资源 仅作分享 http://www.cnblogs.com/Ericzhen/archive/2012/06/11/2545186.html
数据模型(TreeStore)会负责加载和管理这些数据,与TreeGrid组件进行交互。TreeStore通过扩展Ext.data.Store类,增加了对树形数据的支持,如层级结构和展开/折叠节点的处理。 TreeGrid的主要特性包括: 1. **层级...
在EXT中,树(Tree)和表格(Grid)是两种重要的数据展示组件,它们可以单独使用,也可以结合成树表(TreeGrid)以同时展示层次结构和表格数据。 在EXT树表中,分页(Pagination)是一项关键功能,用于处理大量数据...