ext TreeGrid分页可编辑

### 关于Ext TreeGrid分页与可编辑功能的实现 #### 一、背景与目标 在Web应用开发中，特别是涉及到复杂数据展示的应用场景中，`Ext TreeGrid`是一种非常实用且灵活的数据展示组件，它结合了树形结构与表格的形式来呈现数据，非常适合展示具有层次关系的数据集合。本文主要探讨如何实现`Ext TreeGrid`的分页功能，并讨论其在实际项目中的应用案例。 #### 二、核心概念与技术要点 1. **Ext TreeGrid简介**： - `Ext TreeGrid`是基于ExtJS框架的一个组件，能够同时显示树形结构和表格数据。 - 它特别适用于需要同时展现层次结构和详细数据的应用场景。 2. **分页实现**： - 在Ext TreeGrid中实现分页功能通常需要使用到两个Store：一个是用于处理树形数据的`TreeStore`，另一个则是用于处理分页逻辑的普通`JsonStore`。 3. **自定义序号**： - 为了确保在分页的情况下，每一页的序号都能正确显示（即每一页的序号都接续上一页），可以自定义`PageRowNumberer`类来实现。 4. **数据加载与展示**： - 需要通过Ajax请求从服务器获取数据，并将这些数据分别加载到两个Store中。 - 其中`TreeStore`负责加载树形结构的数据，而`JsonStore`则负责加载分页后的表格数据。 #### 三、具体实现步骤 1. **定义自定义序号类**： - 通过继承`Ext.grid.RowNumberer`类来自定义一个名为`Ext.grid.PageRowNumberer`的类，该类负责计算每一页的序号。 ```javascript Ext.grid.PageRowNumberer = Ext.extend(Ext.grid.RowNumberer, { width: 40, renderer: function (value, cellmeta, record, rowIndex, columnIndex, store) { if (store.lastOptions.params != null) { var pageindex = store.lastOptions.params.start; return pageindex + rowIndex; } else { return rowIndex; } } }); ``` 2. **定义列配置**： - 在`me.gridCols`中定义了多个列的配置信息，包括一个自定义的序号列以及多个数据列。 ```javascript me.gridCols = [ new Ext.grid.PageRowNumberer(), { text: 'nid', dataIndex: 'nid', width: 200 }, { xtype: 'treecolumn', text: 'id', dataIndex: 'id', width: 200 }, { text: 'Name', dataIndex: 'name', width: 200 }, { text: 'Sex', dataIndex: 'sex', width: 200 }, { text: 'Age', dataIndex: 'age', width: 200 } ]; ``` 3. **定义TreeStore**： - 使用`Ext.create`方法创建一个`TreeStore`实例，并配置相应的字段、代理以及根节点等属性。 ```javascript me.treeStore = Ext.create('Ext.data.TreeStore', { fields: ['nid', 'id', 'name', 'sex', 'age'], proxy: { type: 'ajax', url: YZSoft.$url('YZSoft.Services.REST/BPM/Process.ashx'), extraParams: { method: 'GetTreeGrid' }, reader: { root: 'children', totalProperty: 'totalCount' } }, root: { id: '0', text: '0', name: "0", sex: "0", age: "0", expanded: true } }); ``` 4. **定义JsonStore**： - 创建一个`JsonStore`实例，并配置相关的字段、分页大小以及Ajax代理等。 ```javascript me.treeStore2 = Ext.create('Ext.data.JsonStore', { autoLoad: true, pageSize: itemsPerPage, proxy: { type: 'ajax', url: YZSoft.$url('YZSoft.Services.REST/BPM/Process.ashx'), extraParams: { method: 'GetTreeGrid' }, reader: { type: 'json', root: 'children', totalProperty: "totalCount" } }, fields: [{ name: "id" }, { name: "name" }, { name: "sex" }, { name: "age" }] }); ``` 5. **添加分页工具栏**： - 使用`Ext.PagingToolbar`来实现分页导航，并将其绑定到`JsonStore`。 ```javascript me.bbar = new Ext.PagingToolbar({ pageSize: itemsPerPage, store: me.treeStore2, displayInfo: true, displayMsg: '显示第{0}-{1}条记录共{2}条记录', displaySize: '5|10|15|20|all', emptyMsg: "无记录" }); ``` 6. **监听翻页事件**： - 监听分页工具栏的`change`事件，在翻页时更新`TreeStore`的数据。 ```javascript me.bbar.on('change', function (obj, pdata, options) { // 翻页时重载treeStore的值 me.treeStore.load({ params: { // 参数设置 } }); }); ``` #### 四、注意事项 - 在使用自定义的`PageRowNumberer`时，需要注意其内部的逻辑是否符合实际情况。 - 对于`TreeStore`和`JsonStore`的配置，应确保所使用的字段名、URL地址以及后端返回的数据格式一致。 - 分页逻辑的实现可能会因具体的业务需求而有所不同，因此在实际开发过程中可能需要根据具体情况调整代码。 - 由于`Ext TreeGrid`的分页实现涉及到了前后端的数据交互，因此还需要关注前端与后端之间的数据同步问题，确保数据的一致性和完整性。 通过以上步骤，我们可以实现一个具备分页功能的可编辑`Ext TreeGrid`组件，为用户提供更加便捷高效的数据管理界面。