treegrid沒有級聯勾選，要用怎麼辦？自己擴充套件唄~

先明確兩個概念：

1、級聯勾選：不包括未載入的子節點

2、深度級聯勾選：包括未載入的子節點

兩種思路：

1、擴充套件個新方法cascadeCheck，當需要進行級聯勾選時，呼叫該方法進行級聯勾選或不勾選。

2、擴充套件onLoadSuccess方法，新增一個自定義屬性：cascadeCheck（級聯）或deepCascadeCheck（深度級聯），通過監聽checkbox的click事件判斷是否級聯或深度級聯來進行級聯勾選或不勾選。

第一種擴充套件，因為是呼叫方法的，所以使用起來比較靈活，你可以在單擊事件裡使用，也可以在雙擊事件、右鍵選單等裡面使用；第二種擴充套件，因為是事件監聽，只要設定了屬性就會自動進行級聯操作。

以下貼上兩種擴充套件的程式碼：

【第一種】擴充套件一個方法cascadeCheck

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的意義就不多說了~

使用示例：

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事件，程式碼如下：

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了。

好了，兩種擴充套件思路均已實現，喜歡用哪種，自己選擇吧，當然兩種一起使用也是沒問題的，呵呵~