Extjs4增加Tree节点级选方法,可异步级选

        树的刷新常常是整颗树全部节点刷新,但有些时候我们需要只刷新某一个节点下的数据,方法很简单,在异步树中我们不难发现,第一次展开一个节点的时候是向后台获取数据的,第二次展开就不会再获取,因方法如下处理:

Ext.applyIf(Ext.data.Model.prototype,{ 

	/*

	 * 重载

	 */

	reload:function(){

		var me=this;		

	    me.set('loaded', false);

		me.set('expanded',false);

		me.expand();

	},

	/*

	 * 添加新节点时重载

	 */

	loadNewNode:function(){

		var me=this;

		me.set("leaf",false);

		me.reload();

	}
});

     树的级选是很常见的操作,笔者整理后添加了异步树的级选操作,就是先展开节点再级选,代码如下:

/*

	 * 级选

	 */

	cascadeCheck:function(checked){

		var me=this;

		me.childCheck(checked);

		me.parentCheck(checked);

	},

	/*

	 * 级选并展开子节点

	 */

	cascadeCheckExpand:function(checked){

		var me=this;

		me.childCheckExpand(checked);

		me.parentCheck(checked);

	},

	/*

	 * 级选子节点

	 */

	childCheck:function(checked){

		var me=this;

		me.cascadeBy(function(child) {

			child.set('checked', checked);

	   });

	},

	/*

	 * 级选子节点并展开

	 */

	childCheckExpand:function(checked){

		var me=this;

		me.expand(false,function(childs){

		    if(childs!=null){

			    for(var i=0;i<childs.length;i++){

			     	var child=childs[i];

					child.set('checked', checked);

					child.childCheckExpand(checked);

				}

			}

		});

	},
/*
	 * 级选父节点
	 */
	parentCheck:function(checked){
		var me=this;
		var parentNode = me.parentNode;
		if (parentNode != null) {
			if((checked&&!parentNode.get('checked'))||(!checked&&!parentNode.hasCheckedChild())){
			        parentNode.set('checked', checked);
					parentNode.parentCheck(checked);
			}
		}
   },
/*
     * 是否存在已选择子节点
     */
   hasCheckedChild:function(){
          var node = this;
          var value=false;
        node.eachChild(function(child) {
            if (child.get('checked')) {
                value=true;
                return false;
            }
        });
        return value;
   }

      此代码跟上面的放在一起即可,加到节点方法上。

      还有一种情况可能大家都有经历,就是级选被包含的节点,比如商品类别,每个商家拥有一套完整的商品类别,这个时候当我第二次修改商家的商品类别时,系统肯定要先把已经保存到该商家的节点勾选出来,这里有两个要求,一是勾选出已经存储的节点,二是树不能全部展开,可以想像,总的商品类别树是很庞大的,不可能把全部节点展开再级选包含的节点,所以改造如下:

/*

	 * 级选并展开被包含节点

	 */

	containCheckChildExpand:function(cons,id){

		var me=this;

		me.expand(false,function(childs){

		    if(childs!=null){

			    for(var i=0;i<childs.length;i++){

			     	var child=childs[i];

			     	if (cons.contain(child.get(id))) {

						child.set('checked', true);

						child.containCheckChildExpand(cons,id);

					}else if(child.get('checked')){

						child.set('checked', false);

						child.childCheck(false);

					}

				}

			}

		});

	},

	/*

	 * 级选被包含节点并展开全部

	 */

	containCheckChildAllExpand:function(cons,id){

		var me=this;

		me.expand(false,function(childs){

		    if(childs!=null){

			    for(var i=0;i<childs.length;i++){

			     	var child=childs[i];

			     	if (cons.contain(child.get(id))) {

						child.set('checked', true);

					}else if(child.get('checked')){

						child.set('checked', false);

						child.childCheck(false);

					}

					child.containCheckChildAllExpand(cons,id);

				}

			}

		});

	},

	/*

	 * 级选被包含节点(同步树)

	 */

	containCheckChild:function(cons,id){

		var me=this;

		me.cascadeBy(function(child) {

			if (cons.contain(child.get(id))) {

				child.set('checked', true);

			}else{

				child.set('checked', false);

			}

	   });

	},

   /*

	 * 级选被包含子节点

	 */

   selectContainChildren:function(res,id){

   		var cons = new Array();

		Ext.each(res, function(re) {

			cons.push(eval("re." + id));

		});

		this.containCheckChildExpand(cons,id);

   },

   /*

	 * 级选被包含子节点并展开全部

	 */

    selectContainChilds:function(res,id){

   		var cons = new Array();

		Ext.each(res, function(re) {

			cons.push(eval("re." + id));

		});

		this.containCheckChildAllExpand(cons,id);

   }

     参数说明一下,cons是包含的数据数组,id是树节点中用于判断是否包含的属性,res是包含的json数组,比如包含数据是:["12","25"],id是text,那么判断是方法 就是node.text是否包含在这个数组中,如果是json数组,就先转换为一般数组,再判断。

     使用的效果是只展开并且勾选了被包含的节点,不包含的节点将不会展开,当然代码中提供了全部展开且勾选被包含节点的方法,   

     完整代码如下:

/**

 * 树节点方法

 */

Ext.applyIf(Ext.data.Model.prototype,{ 

	/*

	 * 重载

	 */

	reload:function(){

		var me=this;		

	    me.set('loaded', false);

		me.set('expanded',false);

		me.expand();

	},

	/*

	 * 添加新节点时重载

	 */

	loadNewNode:function(){

		var me=this;

		me.set("leaf",false);

		me.reload();

	},

	/*

	 * 级选(同步树)

	 */

	cascadeCheck:function(checked){

		var me=this;

		me.childCheck(checked);

		me.parentCheck(checked);

	},

	/*

	 * 级选并展开子节点

	 */

	cascadeCheckExpand:function(checked){

		var me=this;

		me.childCheckExpand(checked);

		me.parentCheck(checked);

	},

	/*

	 * 级选子节点

	 */

	childCheck:function(checked){

		var me=this;

		me.cascadeBy(function(child) {

			child.set('checked', checked);

	   });

	},

	/*

	 * 级选父节点

	 */

	parentCheck:function(checked){

		var me=this;

		var parentNode = me.parentNode;

		if (parentNode != null) {

			if((checked&&!parentNode.get('checked'))||(!checked&&!parentNode.hasCheckedChild())){

			        parentNode.set('checked', checked);

					parentNode.parentCheck(checked);

			}

		}

   },

   /*

	 * 是否存在已选择子节点

	 */

   hasCheckedChild:function(){

      	var node = this;

      	var value=false;

		node.eachChild(function(child) {

			if (child.get('checked')) {

				value=true;

				return false;

			}

		});

		return value;

   },

	/*

	 * 级选子节点并展开

	 */

	childCheckExpand:function(checked){

		var me=this;

		me.expand(false,function(childs){

		    if(childs!=null){

			    for(var i=0;i<childs.length;i++){

			     	var child=childs[i];

					child.set('checked', checked);

					child.childCheckExpand(checked);

				}

			}

		});

	},

	/*

	 * 级选并展开被包含节点

	 */

	containCheckChildExpand:function(cons,id){

		var me=this;

		me.expand(false,function(childs){

		    if(childs!=null){

			    for(var i=0;i<childs.length;i++){

			     	var child=childs[i];

			     	if (cons.contain(child.get(id))) {

						child.set('checked', true);

						child.containCheckChildExpand(cons,id);

					}else if(child.get('checked')){

						child.set('checked', false);

						child.childCheck(false);

					}

				}

			}

		});

	},

	/*

	 * 级选被包含节点并展开全部

	 */

	containCheckChildAllExpand:function(cons,id){

		var me=this;

		me.expand(false,function(childs){

		    if(childs!=null){

			    for(var i=0;i<childs.length;i++){

			     	var child=childs[i];

			     	if (cons.contain(child.get(id))) {

						child.set('checked', true);

					}else if(child.get('checked')){

						child.set('checked', false);

						child.childCheck(false);

					}

					child.containCheckChildAllExpand(cons,id);

				}

			}

		});

	},

	/*

	 * 级选被包含节点(同步树)

	 */

	containCheckChild:function(cons,id){

		var me=this;

		me.cascadeBy(function(child) {

			if (cons.contain(child.get(id))) {

				child.set('checked', true);

			}else{

				child.set('checked', false);

			}

	   });

	},

   /*

	 * 级选被包含子节点

	 */

   selectContainChildren:function(res,id){

   		var cons = new Array();

		Ext.each(res, function(re) {

			cons.push(eval("re." + id));

		});

		this.containCheckChildExpand(cons,id);

   },

   /*

	 * 级选被包含子节点并展开全部

	 */

    selectContainChilds:function(res,id){

   		var cons = new Array();

		Ext.each(res, function(re) {

			cons.push(eval("re." + id));

		});

		this.containCheckChildAllExpand(cons,id);

   }

});

作者: kunoy
申明:作者写博是为了总结经验,和交流学习之用。
如需转载,请尽量保留此申明,并在文章页面明显位置给出原文连接。谢谢!

猜你喜欢

转载自blog.csdn.net/kunoy/article/details/40376713