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

​

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 
   
该方法需要一个参数
 
   
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 
   
 使用该扩展的时候需要注意：
 
   
1、singleSelect=false，明显要支持多选
 
   
2、级联是还需要配置属性（自定义属性，API没有）：
 
   
       cascadeCheck ：true  //普通级联（不包括未加载的子节点）
        deepCascadeCheck ：true //深度级联（包括未加载的子节点）
 
   
3、{field:'ck',checkbox:true}，当然勾选框也不能少
 
   
4、idField同样需要设置，不然找不着id了。
 
   
 
 
   
好了，两种扩展思路均已实现，喜欢用哪种，自己选择吧，当然两种一起使用也是没问题的，呵呵~
 
  

参考：http://easyui.btboys.com/

http://www.w3school.com.cn/jquery/

www.jquery.com/

http://www.jeasyui.com/

http://blog.csdn.net/dqsweet/article/details/7276404