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

treegrid没有级联勾选，要用怎么办？自己扩展呗~

 

先明确两个概念：

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

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

 

两种思路：

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

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

 

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

 

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

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

Js代码  

1. /** 
2.      * 扩展树表格级联勾选方法： 
3.      * @param {Object} container 
4.      * @param {Object} options 
5.      * @return {TypeName}  
6.      */  
7.     $.extend($.fn.treegrid.methods,{  
8.         /** 
9.          * 级联选择 
10.          * @param {Object} target 
11.          * @param {Object} param  
12.          *      param包括两个参数: 
13.          *          id:勾选的节点ID 
14.          *          deepCascade:是否深度级联 
15.          * @return {TypeName}  
16.          */  
17.         cascadeCheck : function(target,param){  
18.             var opts = $.data(target[0], "treegrid").options;  
19.             if(opts.singleSelect)  
20.                 return;  
21.             var idField = opts.idField;//这里的idField其实就是API里方法的id参数  
22.             var status = false;//用来标记当前节点的状态，true:勾选，false:未勾选  
23.             var selectNodes = $(target).treegrid('getSelections');//获取当前选中项  
24.             for(var i=0;i<selectNodes.length;i++){  
25.                 if(selectNodes[i][idField]==param.id)  
26.                     status = true;  
27.             }  
28.             //级联选择父节点  
29.             selectParent(target[0],param.id,idField,status);  
30.             selectChildren(target[0],param.id,idField,param.deepCascade,status);  
31.             /** 
32.              * 级联选择父节点 
33.              * @param {Object} target 
34.              * @param {Object} id 节点ID 
35.              * @param {Object} status 节点状态，true:勾选，false:未勾选 
36.              * @return {TypeName}  
37.              */  
38.             function selectParent(target,id,idField,status){  
39.                 var parent = $(target).treegrid('getParent',id);  
40.                 if(parent){  
41.                     var parentId = parent[idField];  
42.                     if(status)  
43.                         $(target).treegrid('select',parentId);  
44.                     else  
45.                         $(target).treegrid('unselect',parentId);  
46.                     selectParent(target,parentId,idField,status);  
47.                 }  
48.             }  
49.             /** 
50.              * 级联选择子节点 
51.              * @param {Object} target 
52.              * @param {Object} id 节点ID 
53.              * @param {Object} deepCascade 是否深度级联 
54.              * @param {Object} status 节点状态，true:勾选，false:未勾选 
55.              * @return {TypeName}  
56.              */  
57.             function selectChildren(target,id,idField,deepCascade,status){  
58.                 //深度级联时先展开节点  
59.                 if(!status&&deepCascade)  
60.                     $(target).treegrid('expand',id);  
61.                 //根据ID获取下层孩子节点  
62.                 var children = $(target).treegrid('getChildren',id);  
63.                 for(var i=0;i<children.length;i++){  
64.                     var childId = children[i][idField];  
65.                     if(status)  
66.                         $(target).treegrid('select',childId);  
67.                     else  
68.                         $(target).treegrid('unselect',childId);  
69.                     selectChildren(target,childId,idField,deepCascade,status);//递归选择子节点  
70.                 }  
71.             }  
72.         }  
73.     });  

 

该方法需要一个参数

param={

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

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

}

 

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

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

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

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

使用示例：

Js代码  

1. $('#test').treegrid({  
2.                 ...  
3.                 idField:'code',//需设置  
4.                 treeField:'code',  
5.                 singleSelect:false,//需设置  
6.                 columns:[[  
7.                     {field:'ck',checkbox:true},//需设置  
8.                     {title:'Code',field:'code',width:200},  
9.                     ....  
10.                 ]],  
11.                 onClickRow:function(row){  
12.                     //级联选择  
13.                     $(this).treegrid('cascadeCheck',{  
14.                         id:row.code, //节点ID  
15.                         deepCascade:true //深度级联  
16.                     });  
17.                 }  
18.             });  

 

【第二种】扩展treegrid的onLoadSuccess事件，代码如下：

Js代码  

1. /** 
2.      * 扩展树表格级联选择（点击checkbox才生效）： 
3.      *      自定义两个属性： 
4.      *      cascadeCheck ：普通级联（不包括未加载的子节点） 
5.      *      deepCascadeCheck ：深度级联（包括未加载的子节点） 
6.      */  
7.     $.extend($.fn.treegrid.defaults,{  
8.         onLoadSuccess : function() {  
9.             var target = $(this);  
10.             var opts = $.data(this, "treegrid").options;  
11.             var panel = $(this).datagrid("getPanel");  
12.             var gridBody = panel.find("div.datagrid-body");  
13.             var idField = opts.idField;//这里的idField其实就是API里方法的id参数  
14.             gridBody.find("div.datagrid-cell-check input[type=checkbox]").unbind(".treegrid").click(function(e){  
15.                 if(opts.singleSelect) return;//单选不管  
16.                 if(opts.cascadeCheck||opts.deepCascadeCheck){  
17.                     var id=$(this).parent().parent().parent().attr("node-id");  
18.                     var status = false;  
19.                     if($(this).attr("checked")) status = true;  
20.                     //级联选择父节点  
21.                     selectParent(target,id,idField,status);  
22.                     selectChildren(target,id,idField,opts.deepCascadeCheck,status);  
23.                     /** 
24.                      * 级联选择父节点 
25.                      * @param {Object} target 
26.                      * @param {Object} id 节点ID 
27.                      * @param {Object} status 节点状态，true:勾选，false:未勾选 
28.                      * @return {TypeName}  
29.                      */  
30.                     function selectParent(target,id,idField,status){  
31.                         var parent = target.treegrid('getParent',id);  
32.                         if(parent){  
33.                             var parentId = parent[idField];  
34.                             if(status)  
35.                                 target.treegrid('select',parentId);  
36.                             else  
37.                                 target.treegrid('unselect',parentId);  
38.                             selectParent(target,parentId,idField,status);  
39.                         }  
40.                     }  
41.                     /** 
42.                      * 级联选择子节点 
43.                      * @param {Object} target 
44.                      * @param {Object} id 节点ID 
45.                      * @param {Object} deepCascade 是否深度级联 
46.                      * @param {Object} status 节点状态，true:勾选，false:未勾选 
47.                      * @return {TypeName}  
48.                      */  
49.                     function selectChildren(target,id,idField,deepCascade,status){  
50.                         //深度级联时先展开节点  
51.                         if(status&&deepCascade)  
52.                             target.treegrid('expand',id);  
53.                         //根据ID获取下层孩子节点  
54.                         var children = target.treegrid('getChildren',id);  
55.                         for(var i=0;i<children.length;i++){  
56.                             var childId = children[i][idField];  
57.                             if(status)  
58.                                 target.treegrid('select',childId);  
59.                             else  
60.                                 target.treegrid('unselect',childId);  
61.                             selectChildren(target,childId,idField,deepCascade,status);//递归选择子节点  
62.                         }  
63.                     }  
64.                 }  
65.                 e.stopPropagation();//停止事件传播  
66.             });  
67.         }  
68.     });  

 

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

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

2、级联是还需要配置属性（自定义属性，API没有）：

       cascadeCheck ：true  //普通级联（不包括未加载的子节点）
       deepCascadeCheck ：true //深度级联（包括未加载的子节点）

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

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

 

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