dtree 取消复选框的全选功能,并获取复选框选中的数据
程序员文章站
2022-05-31 13:35:50
...
需求:每个节点下面都有自己对应的用户,复选框选中之后,当前节点下的人全部选中,取消选中之后,与当前节点下的人全部不选中,父级节点与子级节点之间选中状态互不影响。
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(); // 重新渲染表单
});
});
上一篇: 十大经典尴尬场面
下一篇: 惊!结过十次婚,却依然是处女?