easyui-treegrid 自定义级联检查勾选

背景:easyui版本 1.4.5 treegrid的cascadeCheck级联检查无法满足自己要求,逼于无奈,自己写了一个(ps:我的前端js也賊水的)

    treeGridList.treegrid({
        idField: "id",
        treeField: "sysResourcename",
        url: path + "/" + webMapping + "/" + mapping + "/queryListByPageAndBindRes/${param.roleId}",
        columns: columnsJson,
        pagination: true,
        toolbar: "#toolbar",
        //设置每页显示的记录数
        pageSize: 100,
        pageList: [100],
        height: 721,
        // 动画
        animate : true,
        checkbox : true,
        // 需设置
        singleSelect:false,
        // 取消级联选择 有缺陷不能为true!
        cascadeCheck: false,
        // 自定义级联选择
        onCheckNode : function(row,checked){
            p = treeGridList.treegrid("getParent", row.id);

            // 调用者id
            var  invokerId =  row.id;
            // 调用者勾选状态
            var invokerChecked = checked;

            while (p) {
                children = p.children;

                var flag  = false;
                for (i = 0 ; i<children.length;i++) {
                    // 父节点的其他子节点若勾选了(或者没有其他子节点)
                    if(children[i].checked == true && children[i].id != invokerId){
                        flag = true;
                        break;
                    }
                }

                // 如果父节点的其他子节点也没有勾选,调用者节点为勾选
                if (!flag && invokerChecked) {
                    // 父节点没有勾选
                    if (!p.checked) {
                        p.checked = true ;
                        p._checked = true ;
                        p.checkState = "checked";

                        // 复选框勾选
                        tck(p.id,1);
                    }

                    // 如果父节点的其他子节点勾选
                }else if(flag){
                    p.checked = true ;
                    p._checked = true ;
                    p.checkState = "checked";

                    // 复选框勾选
                    tck(p.id,1);
                }else if (!flag && invokerChecked == false){// 如果父节点的其他子节点也没有勾选,调用者节点也不勾选
                    p.checked = false ;
                    p._checked = false ;
                    p.checkState = "unchecked";

                    // 复选框不勾选
                    tck(p.id,0);
                }

                invokerId = p.id;
                invokerChecked = p.checked;
                p = treeGridList.treegrid("getParent", p.id);

            }

            cs = treeGridList.treegrid("getChildren", row.id);
            for (i = 0 ; i<cs.length;i++){
                cs[i].checked = checked;
                cs[i]._checked = checked;
                if(checked){
                    cs[i].checkState = "checked";
                    // 复选框勾选
                    tck(cs[i].id,1);
                }else{
                    cs[i].checkState = "unchecked";
                    // 复选框不勾选
                    tck(cs[i].id,0);
                }
            }

        },
        onClickRow : function () {
            treeGridList.treegrid("clearSelections");
        }
    });

    //保存角色和资源的关系
    bindResToRoleBtn.click(function () {
        //1.获取角色ID
        roleId = "${param.roleId}";
        //2.获取选中的资源ID(n个)
        //2.1 获取所有的节点
        resIdArray = [];
        nodes = treeGridList.treegrid("getChildren");
        for (i = 0; i < nodes.length;i++){
            value = nodes[i];
            if (value.checked) {
                resIdArray.push(value.id);
            }
        };
        var resIds = resIdArray.join(",");
        console.log(resIds);
        $.ajax({
            type: "post",
            url: path + "/" + webMapping + "/" + mapping + "/bindResToRole",
            data: {roleId: roleId, resIds: resIds},
            dataType: "text",
            success: function () {
                // 关闭父页面的窗口
                // 在子页面操作父页面的元素:window.parent

                window.parent.bindResView.modal("hide");
                window.parent.toastr.success("绑定成功!");
            },
            error: function (data) {
                window.parent.toastr.error("绑定失败:" + data);
            }

        })
})

/*
    根据treeid 获取该id的checkbox对象
    classStyle : 0 不勾选
                 1 勾选
  */
function tck(id,classStyle){
    ck = $("[node-id='"+id+"'] .tree-checkbox");
    ck.removeClass("tree-checkbox0 tree-checkbox1");
    ck.addClass("tree-checkbox"+classStyle);
}


猜你喜欢

转载自blog.csdn.net/hunwanjie/article/details/80078294