【原创】TreePanel树形节点不收缩刷新
程序员文章站
2022-06-04 15:18:13
...
遇到的问题
在使用Ext树形组件的时候,下层节点的刷新,总是需要下层节点全部搜索然后再展开,如果需要实时的从后台获取数据,改变某些节点的text或者icon时,就显得不够优雅了。
解决方案
负责树形组件TreePanle的TreeLoader是负责获取数据的,集成该类,然后在除第一次刷新之后的加载,将获取后的数据(比如节点的text、icon)更改到现有节点上,就可以很好的完成不收缩刷新
代码
/**************************************************** * goal:为了让树的节点内容更新(目前包括text iconCls) * 而不让树形下层节点收缩带来的更好的用户体验 * disadvantage:不能增删节点 * createDate: 2009.09.24 * author: LXL *****************************************************/ Ext.namespace('SMN.ux.TreeLoader'); SMN.ux.TreeLoader = function(config) { config = config || {}; SMN.ux.TreeLoader.prototype.processResponse = function(response, node, callback){ var json = response.responseText; try { var o = response.responseData || Ext.util.JSON.decode(json); node.beginUpdate(); var responseNodes = o; var treeNodes = node.childNodes; if (treeNodes.length == 0) { // 第一次加载 for(var i = 0, len = responseNodes.length; i < len; i++){ var n = this.createNode(responseNodes[i]); if(n){ node.appendChild(n); } } } else { // 以后加载 for (var i = 0; i < treeNodes.length; i++) { var treeNode = treeNodes[i]; for (var j = 0; j < responseNodes.length; j++) { var responseNode = responseNodes[j]; if (treeNode.attributes.id == responseNode.id) { // 同一个节点 // 更新text treeNode.setText(responseNode.text); // 更新iconCls treeNode.getUI().getIconEl().className = 'x-tree-node-icon' + ' ' + responseNode.iconCls; } } } } node.endUpdate(); if(typeof callback == "function"){ callback(this, node); } }catch(e){ this.handleFailure(response); } }; SMN.ux.TreeLoader.prototype.load = function(node, callback){ // Ext.log('into Ext.ux.TreeLoader.prototype.load'); if(this.doPreload(node)){ // preloaded json children if(typeof callback == "function"){ callback(); } }else if(this.dataUrl||this.url){ this.requestData(node, callback); } }; SMN.ux.TreeLoader.superclass.constructor.call(this, config); } Ext.extend(SMN.ux.TreeLoader, Ext.tree.TreeLoader);
缺点和解决方案
当TreeLoader从后台获取的下层节点不再是目前的节点数量时,比如多了一个孩子节点或者少了一个孩子节点,以上代码是不能完成该功能的,所以可以增加if分支,从后台获取数据后,先比较下层孩子节点数据,遍历节点ID,将需要删除的孩子节点删除,多出来的孩子节点增加上,其他的更新text和icon。
注:本博客文章均已注明原创和转载,如转载本博客文章,需注明原文出处或征求原作者同意。