美文网首页
EasyUI treegrid 深度级联勾选扩展

EasyUI treegrid 深度级联勾选扩展

作者: 陌上无人花自开否 | 来源:发表于2018-08-10 14:25 被阅读0次

    参考文章:EasyUI treegrid级联勾选或深度级联勾选扩展:两种扩展

    在此参考文章的基础上进行扩展:判断子节点是否全选,若全选了,则勾选父节点,否则不勾选

    
    (function ($) {
    
        /**
    
        * 扩展树表格级联勾选方法:
    
        * @param {Object} container
    
        * @param {Object} options
    
        * @return {TypeName} 
    
        */
    
        $.extend($.fn.treegrid.methods, {
    
            /**
    
                * 级联选择
    
                * @param {Object} target
    
                * @param {Object} 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++) {
    
                    var selectid = selectNodes[i][idField];
    
                    // 若当前传入的id存在于已经勾选的项目中, 则状态为已勾选
    
                    if (param.id == selectid) {
    
                        status = true;
    
                    }
    
                }
    
                selectChildren(target[0], param.id, idField, param.deepCascade, status);
    
                selectParent(target[0], param.id, 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 {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) {
    
                            if (checkAllSelect(parentId)) {
    
                                $(target).treegrid('select', parentId);
    
                            }
    
                        } else {
    
                            $(target).treegrid('unselect', parentId);
    
                        }
    
                        selectParent(target, parentId, idField, status);
    
                    }
    
                }
    
                /**
    
                 * 判断子节点是否全部选中
    
                 */
    
                function checkAllSelect(parentId) {
    
                    var flag = true
    
                        , childcodes = []
    
                        , selectNodesList = {};;
    
                    childcodes = $(target).treegrid('getChildren', parentId);
    
                    // 选中的记录
    
                    selectNodes = $(target).treegrid('getSelections');
    
                    for (var i = 0; i < selectNodes.length; i++) {
    
                        var selectid = selectNodes[i][idField];
    
                        selectNodesList[selectid] = selectNodes[i];
    
                    }
    
                    // 判断子节点是否都已经选择了,只要有一个没有选择的,该父节点都要去除选择
    
                    for (var i = 0, len = childcodes.length; i < len; i++) {
    
                        var childid = childcodes[i][idField];
    
                        if (!selectNodesList.hasOwnProperty(childid)) { // 若存在子节点没有勾选的,则将该元素移除
    
                            flag = false;
    
                            break;
    
                        }
    
                    }
    
                    return flag;
    
                }
    
            }
    
        });
    
    }(jQuery));
    
    

    相关文章

      网友评论

          本文标题:EasyUI treegrid 深度级联勾选扩展

          本文链接:https://www.haomeiwen.com/subject/lnwkbftx.html