关于Extjs3.0中的TreeGrid(Ext.ux.maximgb.tg.EditorGridPanel)

谁践踏了优雅 2022-07-12 13:49 152阅读 0赞

欢迎转载，但请保留原帖地址([http://www.liyonghome.cn/index.php/archives/187.html][http_www.liyonghome.cn_index.php_archives_187.html])及作者信息(深海区:tacoley@vip.sina.com)

选择这个控件，是因为在昨天进行的一项开发中，需要一个可编辑的GridPanel控件，另外由于科目一项分为3-4级的树形结构，因此就需要找到一个合适的TreeGridPanel。

在网上查找很久，才发现了在Extjs3.0中，有Ext.ux.maximgb.tg.EditorGridPanel这样一个类提供了对我需求的支持，初步分析一下，依然有这样一些问题。目前本人还在使用这个控件进行开发，如果有什么新的内容会及时更新，欢迎大家通过E-mail和我共同学习。至于我的大多数修改都是通过使用来实现，并未修改源代码，其实诸如禁止指定行编辑，非叶子节点进行统计等，都可以通过修改源代码进行封装实现，但是由于下周就要结束项目开发，时间紧迫，因此没有时间来完善。等项目间歇期有时间了，本人会考虑封装一个新的TreeGrid类来实现以下方法，希望能够和大家讨论。

**1.参数\_lft和\_rgt不知道如何设置，可不可以不用？**

其实\_lft和\_rgt可以不用设置，网上很多代码提供如下样子的实现  
var data = \[  
　　\{"\_id":1,"\_parent":null,"\_level":1,"\_lft":1,"\_rgt":98,"\_is\_leaf":false,"item":"主营业务成本","YN":64.72\},  
　　\{"\_id":2,"\_parent":1,"\_level":2,"\_lft":2,"\_rgt":49,"\_is\_leaf":true,"item":"网络维护成本","YN":64.72\}  
\];  
var record = Ext.data.Record.create(\[  
　　\{name: '\_id', type: 'int'\},  
　　\{name: '\_level', type: 'int'\},  
　　\{name: '\_lft', type: 'int'\},  
　　\{name: '\_rgt', type: 'int'\},  
　　\{name: '\_is\_leaf', type: 'bool'\},  
　　\{name: 'item'\},  
　　\{name: 'benbu', type: 'float'\}  
\]);  
var store = new Ext.ux.maximgb.tg.NestedSetStore(\{  
　　autoLoad : true,  
　　reader: new Ext.data.JsonReader(\{id: ‘\_id’\}, record),  
　　proxy: new Ext.data.MemoryProxy(data)  
\});

在这里为什么需要设置\_lft和\_rgt，是因为Ext.ux.maximgb.tg.NestedSetStore的需要，可以通过TreeGrid.js文件的源代码可以分析，在此Store中，树形结构使用的是基于左右值的无限分类算法。但是在我们的使用当中，去为此json对象生成此参数却相当的麻烦，至少自己一下没能找到解决的办法。在研究这段的代码的同时，自己也发现了一个同样继承于Ext.ux.maximgb.tg.AbstractTreeStore的Ext.ux.maximgb.tg.AdjacencyListStore，最关键的是，这个类所需要的参数，是我们常见的\_parent参数，也就是基于父子关系的树形结构算法。  
　　经过自己测试，可以只需要\_parent就可以使用了，如下。  
var data = \[  
　　\{"\_id":1,"\_parent":null,"\_level":1,"\_is\_leaf":false,"item":"主营业务成本","YN":64.72\},  
　　\{"\_id":2,"\_parent":1,"\_level":2,"\_is\_leaf":true,"item":"网络维护成本","YN":64.72\}  
\];  
var record = Ext.data.Record.create(\[  
　　\{name: '\_id', type: 'int'\},  
　　\{name: '\_level', type: 'int'\},  
　　\{name: '\_is\_leaf', type: 'bool'\},  
　　\{name: 'item'\},  
　　\{name: 'benbu', type: 'float'\}  
\]);  
var store = new Ext.ux.maximgb.tg.AdjacencyListStore(\{  
　　autoLoad : true,  
　　reader: new Ext.data.JsonReader(\{id: ‘\_id’\}, record),  
　　proxy: new Ext.data.MemoryProxy(data)  
\});  
　　在这里面就没有了\_lft和\_rgt参数，仅仅更换了一下Store而已。

**2.树形结构能不能够默认展开？**

通常情况下，大家习惯于在代码的最后调用一个展开方法即可。在源代码中，查到AdjacencyListStore含有一个expandAll()方法，按照字面意思应该就是展开所有节点的方法。但是在使用当中，却发现没有效果。在expandAll()方法中有这样一个定义：records = this.data.getRange()，records 应该就是此store中的所有数据的集合，得到以后分别遍历进行展开操作，在调试js的时候发现，得到的这个records.length居然等于0，思考一会猜测应该是expandAll()比Store的load()方法优先了，在进行展开操作的时候还并未加载到数据。因此自己放弃了Store中的autoLoad : true这项配置。手工写了load操作和expandAll操作。  
　　store.load();  
　　store.expandAll();  
　　这样调整以后就可以默认展开了，但是当自己将测试的本地数据换成远程的动态调用时，发现又没有效果了，原因是store.load()是异步操作，由于远程请求较慢，在store.load()操作还并未返回的时候就调用了store.expandAll()操作，这样也就和原来的错误原因一样了。  
　　后来自己将store.expandAll()操作放在了store.load()操作的加载完毕事件里面，才满足了自己的需求，至于是手工的store.load()，还是autoLoad : true，都无所谓了。  
store.on(”load”,function(e)\{  
　　store.expandAll();  
\});

**3.如何自定义的禁止编辑指定的某一行？**

在代码中，我们可以很容易的让某一列不可编辑，因为EditorGridPanel的模型是基于列模型的，在定义列的时候，我们增加了一个editor属性，去赋值一个编辑器对象，我们不给其赋值就可以实现某一列不可编辑的功能，但是行呢？在api中，似乎没有提供这个功能，看来只有自己去实现了。首先还是说说我自己的需求：

![EditorGridPanel][]

通过此图来描述我的需求。我的树形结构可能出现3-4级两种，图片所示是3级的情况，我允许编辑的行必须是树中叶子节点的行，比如“大修理”和“维保”，而非叶子节点及根节点的数据，通过统计所在列的子节点对应数据得到。比如“网络维护成本-本部”，就是由“大修理-本部”和“维保-本部”累加得到，此处的值不允许编辑。所以得出以下结论：叶子节点所在行可编辑，非叶子节点行不可编辑。（至于统计相关代码在后面讨论，此处仅讨论编辑问题）  
　　因此，我们可以由以下代码实现：  
grid.on(”beforeedit”,function(e)\{  
　　var currRecord = e.record;  
　　if(!currRecord.get(’\_is\_leaf’))\{  
　　　　e.cancel = true;  
　　\}  
\});  
　　此处是监听grid的beforeedit事件，在edit之前，判断此节点是不是叶子节点，如果不是叶子节点，则取消编辑状态。至于判断是不是叶子节点，可以通过之前的\_is\_leaf进行判断(\_is\_leaf是必须设置的，会影响到树形结构前面的“+”符号图案)，另外也可以通过\_level进行判断。

**4.如何统计汇总所在列子节点的数值？**

在这里，有两种方式进行统计，一种是后台统计好数据，通过json传递给前台Extjs，这种方式不再我们讨论范围，因为这种方式不需要讨论^\_^。我们需要讨论的是，节点没有数据，仅叶子节点含有数据，节点数据是在前台汇总得到的值。  
　　这里对所在列进行统计汇总，首先我就想到了ColumnModel的renderer（渲染）属性，此属性可以配置一个方法，在显示EditorGridPanel时，调用渲染的方法来实现修改单元格的文字颜色、内容等功能。在这里我也将采用这种方式进行汇总数据。  
　　我给ColumnModel的需要统计的列增加一个renderer:treeNodeSum属性，即在显示此列单元格时，每个单元格会分别调用treeNodeSum方法。于是我们可以这样实现：  
var totalValue;  
function treeNodeSum(value, cellmeta, record, rowIndex, columnIndex, store)\{  
　　if(record.get(’\_is\_leaf’))\{  
　　　　return value;  
　　\}else\{  
　　　　totalValue = 0;  
　　　　totalNode(record,cellmeta.id);  
　　　　return totalValue;  
　　\}  
\}  
function totalNode(record,fieldName)\{  
　　if(record.get(’\_is\_leaf’))\{  
　　　　totalValue += record.get(fieldName);  
　　\}  
　　var mixedCollection = store.query(”\_parent”,record.get(”\_id”));  
　　mixedCollection.each(function(item,index,length)\{  
　　　　totalNode(item,fieldName);  
　　\});  
\}

首先是调用treeNodeSum方法，其中判断if(record.get(’\_is\_leaf’))，当此处为true时，证明此节点是叶子节点，是被统计项，不需要进行统计，所以直接返回。而非叶子节点，均是统计项，在这里，我写了一个递归函数，去遍历子节点及子节点的字节点等，当子节点是叶子节点时，将数值进行累加并返回。由此我们就可以在展示的时候汇总当前数据，并显示给用户了，也如之前的图所示，“主营业务成本”和“网络业务成本”的数字均由前台统计出来的。

到这里，新的问题出来了，页面展示的时候，节点的统计数据出来了，但是当我修改后又怎么更新统计数据呢？将在下一个问题中进行讨论。

**5.如何实时更新统计数据？**

这里说到，在修改后实时统计，当然马上就联想到在编辑后这个事件下功夫了。首先找到编辑后的事件为：afteredit，  
监听这个事件，当发生这个事件时去更新父节点的数据，并递归调用到根节点才结束循环。代码如下：  
grid.on(”afteredit”,function(e)\{  
　　var currValue;  
　　var parentRecord;  
　　var columnName = grid.getColumnModel().getDataIndex(e.column);  
　　var currRecord = e.record;  
　　while(currRecord.get(’\_parent’)!==null)\{  
　　　　parentRecord = store.getAt(store.find(”\_id”,currRecord.get(’\_parent’)));  
　　　　currValue = parentRecord.get(columnName);  
　　　　currValue -= e.originalValue;  
　　　　currValue += e.value;  
　　　　parentRecord.set(columnName,currValue);  
　　　　parentRecord.dirty = false;  
　　　　parentRecord.commit();  
　　　　currRecord = parentRecord;  
　　\}  
\});  
　　这样就可以在修改叶子节点数据后,实时的更新父节点的统计数据。但是这里出现一个情况，当代码去更新父节点的时候，父节点出现了带三角符号的已编辑状态，在获取store的已修改数据时，会获取到这些数据，这是我们不希望的，因此最好能去除掉统计节点的编辑状态，避免获取修改数据时获取到。

**6.如何取消已编辑状态并除去提示的三角符号？**

其实在上一节的代码中已经给出了代码，这里进行一下说明，通常步骤分为以下三步：  
　　　　parentRecord.set(columnName,currValue);  
　　　　parentRecord.dirty = false;  
　　　　parentRecord.commit();  
　　首先是修改数据，这个时候页面上会出现三角形的符号提示此字段已被修改。这个时候我们需要设置dirty=false，这样在store获取修改数据时就不会获得了，但是此刻界面上面没有更新，依然有三角符号的提示，这个时候我们需要commit()一下，就可以消除掉三角符号了。

**7.如何一次性批量提交修改了的记录？**

**8.如何实时的分别提交修改了的记录？**

此功能并未在我的代码里面使用，主要考虑到在用户的编辑过程当中一直不停的操作数据库不太好，但是如果数据较少的朋友也可以尝试此方式。可以通过注册afteredit事件实现。  
grid.on(”afteredit”,function(e)\{  
\});  
　　在此方法中传入的e参数实际上是一个Event，包含了此数据的值信息，行列值等，通过这些数据就可以得到此数据的归属，之后发起一个异步的Ajax请求。这里最好还是做一下失败判断，如果有保存失败的提示用户，并且将修改了的值还原最好。当修改成功以后，清除修改提示状态。

[http_www.liyonghome.cn_index.php_archives_187.html]: http://www.liyonghome.cn/index.php/archives/187.html
[EditorGridPanel]: http://www.liyonghome.cn/wp-content/uploads/2009/12/EditorGridPanel1.png