欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

dtree 取消复选框的全选功能,并获取复选框选中的数据

程序员文章站 2022-05-31 13:35:50
...

需求:每个节点下面都有自己对应的用户,复选框选中之后,当前节点下的人全部选中,取消选中之后,与当前节点下的人全部不选中,父级节点与子级节点之间选中状态互不影响。dtree 取消复选框的全选功能,并获取复选框选中的数据dtree 取消复选框的全选功能,并获取复选框选中的数据
JS 实现

// 初始化树
        var DemoTree = dtree.render({
            elem: "#demoTree",
            url: url,
            dataStyle: "layuiStyle",  //使用layui风格的数据格式
            dataFormat: "list",  //配置data的风格为list
            response:{message:"msg",statusCode:0},  //修改response中返回数据的定义
            checkbar:true, //开启复选框
            icon:"-1",
            checkbarType: "self", // 各级节点选中状态互不影响
            checkbarFun: {
                chooseBefore: function ($i, node) {
                        if (node.checked == "0") {
                            // 先将当前节点选中
                            DemoTree.checkStatus($i).check();
                            // 获取右侧用户选择框 name=user[] 的input
                            var userCheckFor = $("#userCheckbox").find("input[name='user["+node.nodeId+"]']");
                           // userCheckFor 是个类数组,要把类数组转为数组
                            var length = userCheckFor.length;
                            var userCheckArr = [];
                            for (var i = 0; i < length; i++) {
                                userCheckArr.push(userCheckFor[i]);
                            }
                            // 更改右侧用户为选中状态,要用 prop,不要用 attr 
                            for (var j=0;j<userCheckArr.length;j++){
                                $(userCheckArr[j]).prop("checked","true");
                                form.render("checkbox");  // 重新渲染表单
                            }
                        } else if (node.checked == "1") {
                            // 先将当前节点不选中
                            DemoTree.checkStatus($i).noCheck();
                            // 获取右侧用户选择框 name=user[] 的input
                            var userNoCheckFor = $("#userCheckbox").find("input[name='user["+node.nodeId+"]']");
                            var length = userNoCheckFor.length;
                            var userNoCheckArr = [];
                            for (var m = 0; m < length; m++) {
                                userNoCheckArr.push(userNoCheckFor[m]);
                            }
                            for (var n=0;n<userNoCheckArr.length;n++){
                                $(userNoCheckArr[n]).prop("checked",false);
                                form.render("checkbox"); // 重新渲染复选框表单,必不可少
                            }
                        }
                }
            }
        });
        // 绑定节点点击
            dtree.on("node('demoTree')" ,function(obj){
                var nodeId = obj.param.nodeId;
                layui.jquery.post('请求的接口地址', {
                    departId: nodeId   // 将nodeId 传入后台的 departId 
                }, function (data) {
                    var checkUser = new Array();
                    var unCheckUser = new Array();
                    var allStr='';
                    var userStr = '';
                    for (key in data) {  // 获取返回的 data 数据放入字符串中
                        var userA = data[key];
                        var userName = userA.userName;
                        userStr += " <input type='checkbox' name='user["+userA.departId +"]' depart_id='"+ userA.departId+"' title='"+userName+"'>";
                    }
                    $("#userCheckbox").html(userStr);// 渲染页面
                    form.render();    // 重新渲染表单
                });
            });


相关标签: Javascript