treegrid级联勾选或深度级联勾选扩展:两种扩展

先明确两个概念:

1、级联勾选:不包括未加载的子节点

2、深度级联勾选:包括未加载的子节点

 

两种思路:

1、扩展个新方法cascadeCheck,当需要进行级联勾选时,调用该方法进行级联勾选或不勾选。

2、扩展onLoadSuccess方法,添加一个自定义属性:cascadeCheck(级联)或deepCascadeCheck(深度级联),通过监听checkbox的click事件判断是否级联或深度级联来进行级联勾选或不勾选。

 

第一种扩展,因为是调用方法的,所以使用起来比较灵活,你可以在单击事件里使用,也可以在双击事件、右键菜单等里面使用;第二种扩展,因为是事件监听,只要设置了属性就会自动进行级联操作。

以下贴上两种扩展的代码:

【第一种】扩展一个方法cascadeCheck


    /**
	 * 扩展树表格级联勾选方法:
	 * @param {Object} container
	 * @param {Object} options
	 * @return {TypeName} 
	 */
	$.extend($.fn.treegrid.methods,{
		/**
		 * 级联选择
	     * @param {Object} target
	     * @param {Object} param 
		 *		param包括两个参数:
	     *			id:勾选的节点ID
	     *			deepCascade:是否深度级联
	     * @return {TypeName} 
		 */
		cascadeCheck : function(target,param){
			var opts = $.data(target[0], "treegrid").options;
			if(opts.singleSelect)
				return;
			var idField = opts.idField;//这里的idField其实就是API里方法的id参数
			var status = false;//用来标记当前节点的状态,true:勾选,false:未勾选
			var selectNodes = $(target).treegrid('getSelections');//获取当前选中项
			for(var i=0;i<selectNodes.length;i++){
				if(selectNodes[i][idField]==param.id)
					status = true;
			}
			//级联选择父节点
			selectParent(target[0],param.id,idField,status);
			selectChildren(target[0],param.id,idField,param.deepCascade,status);
			/**
			 * 级联选择父节点
			 * @param {Object} target
			 * @param {Object} id 节点ID
			 * @param {Object} status 节点状态,true:勾选,false:未勾选
			 * @return {TypeName} 
			 */
			function selectParent(target,id,idField,status){
				var parent = $(target).treegrid('getParent',id);
				if(parent){
					var parentId = parent[idField];
					if(status)
						$(target).treegrid('select',parentId);
					else
						$(target).treegrid('unselect',parentId);
					selectParent(target,parentId,idField,status);
				}
			}
			/**
			 * 级联选择子节点
			 * @param {Object} target
			 * @param {Object} id 节点ID
			 * @param {Object} deepCascade 是否深度级联
			 * @param {Object} status 节点状态,true:勾选,false:未勾选
			 * @return {TypeName} 
			 */
			function selectChildren(target,id,idField,deepCascade,status){
				//深度级联时先展开节点
				if(!status&&deepCascade)
					$(target).treegrid('expand',id);
				//根据ID获取下层孩子节点
				var children = $(target).treegrid('getChildren',id);
				for(var i=0;i<children.length;i++){
					var childId = children[i][idField];
					if(status)
						$(target).treegrid('select',childId);
					else
						$(target).treegrid('unselect',childId);
					selectChildren(target,childId,idField,deepCascade,status);//递归选择子节点
				}
			}
		}
	});

该方法需要一个参数

param={

    id:'节点id',//这里的id其实是所选行的idField列的值

    deepCascade:true  //true:深度级联,false:级联

}

 

使用该方法的时候需要注意:

1、singleSelect=false,明显要支持多选

2、{field:'ck',checkbox:true},当然勾选框也不能少

3、idField需要设置,不然找不着id了。idField的意义就不多说了~

使用示例:


    

         $('#test').treegrid({
	...
	idField:'code',//需设置
	treeField:'code',
	singleSelect:false,//需设置
	columns:[[
		{field:'ck',checkbox:true},//需设置
		{title:'Code',field:'code',width:200},
		....
	]],
	onClickRow:function(row){
		//级联选择
		$(this).treegrid('cascadeCheck',{
			id:row.code, //节点ID
			deepCascade:true //深度级联
		});
	}
});

第二种】扩展treegrid的onLoadSuccess事件,代码如下:

    /**
	 * 扩展树表格级联选择(点击checkbox才生效):
	 * 		自定义两个属性:
	 * 		cascadeCheck :普通级联(不包括未加载的子节点)
	 * 		deepCascadeCheck :深度级联(包括未加载的子节点)
	 */
	$.extend($.fn.treegrid.defaults,{
		onLoadSuccess : function() {
			var target = $(this);
			var opts = $.data(this, "treegrid").options;
			var panel = $(this).datagrid("getPanel");
			var gridBody = panel.find("div.datagrid-body");
			var idField = opts.idField;//这里的idField其实就是API里方法的id参数
			gridBody.find("div.datagrid-cell-check input[type=checkbox]").unbind(".treegrid").click(function(e){
				if(opts.singleSelect) return;//单选不管
				if(opts.cascadeCheck||opts.deepCascadeCheck){
					var id=$(this).parent().parent().parent().attr("node-id");
					var status = false;
					if($(this).attr("checked")) status = true;
					//级联选择父节点
					selectParent(target,id,idField,status);
					selectChildren(target,id,idField,opts.deepCascadeCheck,status);
					/**
					 * 级联选择父节点
					 * @param {Object} target
					 * @param {Object} id 节点ID
					 * @param {Object} status 节点状态,true:勾选,false:未勾选
					 * @return {TypeName} 
					 */
					function selectParent(target,id,idField,status){
						var parent = target.treegrid('getParent',id);
						if(parent){
							var parentId = parent[idField];
							if(status)
								target.treegrid('select',parentId);
							else
								target.treegrid('unselect',parentId);
							selectParent(target,parentId,idField,status);
						}
					}
					/**
					 * 级联选择子节点
					 * @param {Object} target
					 * @param {Object} id 节点ID
					 * @param {Object} deepCascade 是否深度级联
					 * @param {Object} status 节点状态,true:勾选,false:未勾选
					 * @return {TypeName} 
					 */
					function selectChildren(target,id,idField,deepCascade,status){
						//深度级联时先展开节点
						if(status&&deepCascade)
							target.treegrid('expand',id);
						//根据ID获取下层孩子节点
						var children = target.treegrid('getChildren',id);
						for(var i=0;i<children.length;i++){
							var childId = children[i][idField];
							if(status)
								target.treegrid('select',childId);
							else
								target.treegrid('unselect',childId);
							selectChildren(target,childId,idField,deepCascade,status);//递归选择子节点
						}
					}
				}
				e.stopPropagation();//停止事件传播
			});
		}
	});

使用该扩展的时候需要注意:

1、singleSelect=false,明显要支持多选

2、级联是还需要配置属性(自定义属性,API没有):

       cascadeCheck :true  //普通级联(不包括未加载的子节点)
       deepCascadeCheck :true //深度级联(包括未加载的子节点)

3、{field:'ck',checkbox:true},当然勾选框也不能少

4、idField同样需要设置,不然找不着id了。

 

好了,两种扩展思路均已实现,喜欢用哪种,自己选择吧,当然两种一起使用也是没问题的,呵呵~

我采用的是第二种方法,不过第二种方法还是有bug,就是selectparent里面的当 
status为false的时候,父节点选不选应该根据父节点的所有子节点中,是否有选中的来判断
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值