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

 

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