在项目中,tree组件获取选中id后,id也包涵了父节点,回显的时候,父节点选中,子节点也全部选中的问题,以下简单的方法,用oncheck
禁用选中父节点后自动选中子节点功能,可以再layui tree 的oncheck事件里进行更改即可。
//开启复选框
tree.render({
elem: '#test7'
, id: 'demoId1'
, data: result
, showCheckbox: true
, oncheck: function (obj) {
var childs = $(obj.elem).find('.' + "layui-tree-pack").find('input[same="layuiTreeCheck"]');
childs.each(function () {
this.checked = false;
});
form.render('checkbox');
}
});
tree.setChecked('demoId1', ['1', '11']); //勾选指定节点,1是父节点id,11是子节点。
//选中节点id,包涵了父id
var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据,demoId1在tree定义一个id
console.log("111", checkedData)
var arrId = []
getCheckedId(checkedData);
// 测试
console.log(arrId);
// 获取选中节点的id,遍历树形列表去获取每一级的id
function getCheckedId(jsonObj) {
jsonObj.forEach((item, index) => {
arrId.push(item.id)
if (item.children != []) {
getCheckedId(item.children);//递归实现遍历每一层级数据
}
});
return arrId;
}