欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

【原创】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。

 

注:本博客文章均已注明原创和转载,如转载本博客文章,需注明原文出处或征求原作者同意。