layui treeGrid多级数据 通过js代码全选复选框
时间: 2023-10-10 07:11:05 浏览: 106
jQuery Easyui Treegrid实现显示checkbox功能
可以通过以下代码实现layui treeGrid多级数据的全选复选框:
```javascript
var tree = layui.treeGrid;
var idList = []; // 用来存储所有节点的 id
var checkboxList = []; // 用来存储所有节点的复选框元素
tree.render({
// 渲染代码
done: function(res, curr, count) {
// 遍历所有节点,获取 id 和复选框元素
layui.each(res.data, function(index, item) {
idList.push(item.id);
checkboxList.push($('#treeGridCheckbox'+item.id));
});
}
});
// 全选复选框
$('#treeGridCheckboxAll').on('click', function() {
var checked = $(this).prop('checked');
layui.each(checkboxList, function(index, item) {
$(item).prop('checked', checked);
});
});
// 单个节点复选框
layui.each(idList, function(index, id) {
$('#treeGridCheckbox'+id).on('click', function() {
var checked = $(this).prop('checked');
var parentNode = tree.getParentId(id); // 获取当前节点的父节点 id
if (parentNode) {
var siblings = tree.getSiblings(parentNode); // 获取当前节点的兄弟节点
var checkedCount = 0;
layui.each(siblings, function(index, sibling) {
if ($('#treeGridCheckbox'+sibling.id).prop('checked')) {
checkedCount++;
}
});
if (checkedCount === siblings.length) {
$('#treeGridCheckbox'+parentNode).prop('checked', true); // 如果所有兄弟节点都被选中,则勾选父节点
} else {
$('#treeGridCheckbox'+parentNode).prop('checked', false); // 否则取消勾选父节点
}
}
});
});
```
以上代码实现了以下功能:
1. 遍历所有节点,获取节点的 id 和复选框元素,并存储在 `idList` 和 `checkboxList` 数组中。
2. 点击全选复选框时,将所有节点的复选框勾选状态设置为与全选复选框相同。
3. 点击单个节点的复选框时,如果该节点的所有兄弟节点都被选中,则勾选该节点的父节点;否则取消勾选该节点的父节点。
阅读全文