showCheckbox: true 是唯一必需配置,否则复选框功能不启用;节点必须含 id 且 children 为数组,渲染时需指定实例 id 才能正确调用 getChecked()。
showCheckbox: true 是唯一必需配置
不加这行,树里根本不会出现复选框——不是样式问题,是功能压根没启用。layui 的 tree 组件默认关闭复选框,必须显式声明。
-
showCheckbox是布尔值,只接受true或false,传字符串"true"或数字1会失效 - 它必须写在
tree.render()的配置对象里,不能靠后续调用方法“补开” - 如果树容器(如
#dept_tree)还没挂载到 DOM 就执行render(),复选框也不会渲染,建议确保 DOM 已就绪再初始化
父子联动是默认行为,但依赖 data 结构正确
Layui 自动处理“全选/半选/取消”状态同步,但前提是你的 data 数组里每个节点都带 id,且子节点放在 children 数组中——漏掉 id 会导致父节点无法识别子项,联动就断了。
- 错误示例:
{ title: '子节点', children: [...] }缺少id→ 点击父节点时,这部分子节点不会被勾选 - 正确结构必须是:
{ id: 102, title: '子节点2', children: [...] } -
children必须是数组,哪怕为空也要写成children: [],写成children: null或直接不写,都会让 layui 跳过该分支的联动计算
获取选中节点要用 id + render 时指定的实例 ID
很多人调用 tree.getChecked() 报错或返回空,是因为没给树实例配 id 参数——这个 id 不是 HTML 的 id,是 tree.render() 配置里的 id 字段,用于内部索引。
- 渲染时必须加:
id: 'myDeptTree'(任意合法字符串) - 之后才能用:
tree.getChecked('myDeptTree')拿到选中节点数组 - 如果漏了
id,getChecked()默认查第一个渲染的树,多棵树时极易拿错数据 - 返回结果是原始节点对象数组,含
id、title等字段,不含额外包装,可直接提交给后端
oncheck 回调里别直接操作 DOM 或发请求
oncheck 是高频触发事件(比如点一个父节点,可能触发几十次回调),在其中做 $.ajax 或 layer.msg 容易卡顿甚至重复提交。
- 只建议做轻量动作:记录日志、更新本地状态、标记脏数据
- 批量操作(如保存权限)应放在“确定”按钮里统一调用
getChecked(),而不是每点一次就存一次 - 如果真要响应单次点击,加个简单节流:
let ticking = false; oncheck: () => { if (ticking) return; ticking = true; setTimeout(() => ticking = false, 100); ... }
id 字段缺失和 children 类型错误,这两点一出,联动看起来“失灵”,其实只是 layui 根本没把那些节点纳入计算范围。










