///前台 var grid = new Ext.ux.tree.TreeGrid({ title: '任务管理', width: 500, height: 300, enableDD: true, enableSort:false, rootVisible:false, columns:[{ header: '任务名称', dataIndex: 'Task_ID', width: 230 },{ header: '开始时间', width: 100, dataIndex: 'TaskName', align: 'center' }], root:new Ext.tree.AsyncTreeNode({ id:'0', loader:new Ext.tree.TreeLoader({ dataUrl: 'Data/Work_Task/Work_Task.aspx?flag=0', listeners:{ "beforeload":function(treeloader,node) { treeloader.baseParams={ treegrid_id:node.id, method:'POST' }; } } }) }), listeners: { "click":function(node,event) { if (node.isLeaf()) { event.stopEvent(); } else { event.stopEvent(); node.toggle(); } } } });
//后台返回值的方法 public string GetData_TaskInfo(string _id) { if (_id == "0") //第一次加载,只加载父节点 { string _fathers = ""; DataSet dsWorkInfo = TIS.Get_TaskInfo(_id, ""); foreach (DataRow r_Work in dsWorkInfo.Tables[0].Rows) { _fathers += "{leaf: false,id:'" + r_Work[0] + "',"; foreach (DataColumn column_Work in dsWorkInfo.Tables[0].Columns) { _fathers += column_Work.ColumnName + ":'" + r_Work[column_Work].ToString() + "',"; } _fathers = _fathers.Remove(_fathers.Length - 1, 1); _fathers += "},"; } if (_fathers == "") { return ""; } return _fathers = " [" + _fathers.Remove(_fathers.Length - 1, 1) + "]"; } else //第二次加载,加载子节点 { string _fathers = ""; DataSet dsStageTaskInfo = TIS.Get_StageTask(_id); foreach (DataRow r_StageTask in dsStageTaskInfo.Tables[0].Rows) { _fathers += "{leaf: true,"; foreach (DataColumn column_StageTask in dsStageTaskInfo.Tables[0].Columns) { _fathers += column_StageTask.ColumnName + ":'" + r_StageTask[column_StageTask].ToString() + "',"; } _fathers = _fathers.Remove(_fathers.Length - 1, 1); _fathers += "},"; } if (_fathers == "") { return ""; } return _fathers = " [" + _fathers.Remove(_fathers.Length - 1, 1) + "]"; } }
相关推荐
本文详细介绍了如何使用ExtJS中的`Ext.ux.tree.TreeGrid`组件实现异步加载功能,包括前端配置和后端数据处理两个方面。通过这种方式可以有效提升用户体验,同时减轻服务器的压力。在实际开发过程中,还需要根据具体...
"ext.ux.tree.treegrid" 指的是这个组件属于Ext JS的一个第三方插件(UX),UX是Ext JS社区为扩展其核心功能而创建的一系列用户界面组件。这些组件通常不是官方提供的,但它们丰富了Ext JS的功能,使得开发者可以更...
jquery.treegrid.min.js jquery.treegrid.min.jsjquery.treegrid.min.jsjquery.treegrid.min.js
扩展jquery.treegrid.extension.js,实现jquery-treegrid的懒加载,结合jquery.cookie.js来实现缓存,减缓页面大量数据加载
- **动态加载**:支持异步加载子节点,提高页面性能,特别是处理大量数据时。 - **排序**:提供了列排序功能,用户可以按某一列对数据进行升序或降序排列。 - **搜索与过滤**:内置搜索和过滤机制,帮助用户快速定位...
实现treegrid组件的(CRUD)读取、新增、修改、删除 //设置grid单元格处于编辑状态 selcell:function(arow,acol){ this.editingPlugin.startEditByPosition({row:arow,column:acol}); }, selcell2:function(node,...
9. **性能优化**:由于表格可能包含大量数据,TreeGrid.js可能采用了懒加载技术,只在需要时加载子节点,减少初次加载时的资源消耗。 10. **文档和示例**:为了方便开发者快速上手,TreeGrid.js通常会提供详细的API...
在EASYUI TreeGrid中,异步加载数据是一项重要的功能,允许用户在需要时动态获取数据,提高应用的性能和用户体验。 异步加载数据通常涉及到以下几个关键点: 1. **配置URL**:在TreeGrid的初始化参数中,`url`属性...
7.5.5 ext.data.treestore加载数据的方法 / 354 7.5.6 store的配置项 / 358 7.5.7 store的分页 / 359 7.5.8 store的排序:ext.util.sorter与ext.util.sortable / 360 7.5.9 store的过滤:ext.util.filter / 363...
感谢 Ericzhen 远离颠倒梦想,蕴籍无上清凉 这里引用它的资源 仅作分享 http://www.cnblogs.com/Ericzhen/archive/2012/06/11/2545186.html
在EXT JS这个强大的JavaScript框架中,`TreeGrid`是一种结合了树形结构和表格功能的组件,它允许用户同时展示数据的层次结构和表格信息。`editTreeGrid`是EXT JS中的一个特例,它是可编辑的TreeGrid面板,提供了在树...
自己封装的bootstrap-treegrid.js来实现树形菜单
在Web应用开发中,特别是涉及到复杂数据展示的应用场景中,`Ext TreeGrid`是一种非常实用且灵活的数据展示组件,它结合了树形结构与表格的形式来呈现数据,非常适合展示具有层次关系的数据集合。本文主要探讨如何...
在ExtJS中,TreeGrid是通过`Ext.tree.Panel`类实现的,它继承自`Ext.grid.Panel`,增加了树形结构的功能。 在本地数据的例子中,我们通常会用到`Ext.data.TreeStore`来存储和管理数据。TreeStore是ExtJS中的一个...
bootstrap-table-treegrid.js
6. **实现数据加载和异步更新**:根据实际需求,可能需要实现异步加载数据,以提高性能和用户体验。 在“TreeGrid1”文件中,可能包含了实现这些功能的XAML和C#代码。例如,XAML文件可能会有如下结构: ```xml ...
而`TreeGrid.packed.js`则是经过压缩和优化的版本,用于生产环境,以减少页面加载时间。在实际应用中,开发者会根据需要选择使用未压缩或压缩后的版本。 `index.css`和`index.html`则是示例文件。`index.html`用于...
jQuery异步treeTable插件是用于在网页上实现这种功能的一种高效工具,它结合了表格与树形结构的优点,可以动态加载数据,节省页面资源,提升用户体验。本文将深入探讨这一插件的工作原理、使用方法以及实际应用中的...
在ExtJS4中,TreeGrid主要由`Ext.tree.Panel`类定义,它扩展了`Ext.grid.Panel`,因此具备了表格的所有功能,同时也包含了树结构的特性。 创建一个TreeGrid的第一步是定义模型(Model)。模型定义了数据的字段及其...