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

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

 

先明确两个概念：

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

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

 

两种思路：

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

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

 

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

 

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

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

Js代码  



/** 

     * 扩展树表格级联勾选方法： 

     * @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的意义就不多说了~

使用示例：

Js代码  



$('#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事件，代码如下：

Js代码  



/** 

     * 扩展树表格级联选择（点击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了。

 

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