3分钟掌握Layui树形复选框：多选联动全攻略
【免费下载链接】layui一套遵循原生态开发模式的 Web UI 组件库，采用自身轻量级模块化规范，易上手，可以更简单快速地构建网页界面。项目地址: https://gitcode.com/GitHub_Trending/la/layui
还在为复杂的树形选择功能而烦恼吗？Layui树形复选框组件让你轻松实现父子节点联动、批量选择等强大功能，特别适合权限分配、分类管理等业务场景。本文将带你从零开始，快速掌握这个实用组件的核心用法。
一、快速入门：开启复选框功能
想要在树形组件中显示复选框，只需要一个简单的配置：
layui.use('tree', function(){ var tree = layui.tree; tree.render({ elem: '#demoTree', data: [{ title: '父节点', id: 1, children: [{ title: '子节点1', id: 101 },{ title: '子节点2', id: 102 }] }], showCheckbox: true // 关键配置，开启复选框 }); });就是这么简单！一行代码就能让你的树形组件拥有多选能力。
二、智能联动：父子节点自动同步
Layui树形复选框最强大的功能就是智能联动逻辑：
自动同步规则：
- ✅ 选中父节点 → 所有子节点自动选中
- ⚠️ 部分子节点选中 → 父节点显示半选状态
- ❌ 取消所有子节点 → 父节点自动取消选中
tree.render({ elem: '#demoTree', data: [...], showCheckbox: true, oncheck: function(obj){ // 监听复选框点击事件 console.log("节点ID:", obj.data.id); console.log("选中状态:", obj.checked); } });三、实用技巧：选中状态管理
1. 获取所有选中节点
// 渲染时指定唯一ID tree.render({ id: 'myTree', // 重要：设置实例标识 showCheckbox: true }); // 获取选中数据 var checkedNodes = tree.getChecked('myTree'); console.log("选中节点:", checkedNodes);2. 批量设置选中状态
// 勾选指定ID的节点 tree.setChecked('myTree', [101, 103, 105]);四、常见问题解决方案
问题1：如何禁用特定节点？在数据中添加disabled: true属性即可：
{ title: '禁选节点', id: 99, disabled: true // 该节点无法被选中 }问题2：如何取消父子联动？设置showCheckbox: {linkage: false}即可。
五、实战案例：权限管理系统
<div class="layui-card"> <div class="layui-card-header">角色权限分配</div> <div class="layui-card-body"> <div id="permissionTree"></div> </div> </div> <script> layui.use(['tree', 'layer'], function(){ var tree = layui.tree; var layer = layui.layer; // 权限数据 var permissionData = [ { title: '系统管理', id: 1, children: [ {title: '用户管理', id: 101, checked: true}, {title: '角色管理', id: 102}, {title: '菜单管理', id: 103} ] }, { title: '内容管理', id: 2, children: [ {title: '文章管理', id: 201}, {title: '分类管理', id: 202} ] } ]; // 渲染权限树 tree.render({ elem: '#permissionTree', data: permissionData, id: 'permissionTree', showCheckbox: true }); }); </script>六、高级配置选项
除了基础的复选框功能，Layui树形组件还提供丰富的配置选项：
- 手风琴模式：
accordion: true，同一时间只能展开一个节点 - 仅图标控制：
onlyIconControl: true，只能通过图标展开/收缩 - 连接线控制：
showLine: false，关闭节点间的连接线
总结
Layui树形复选框组件通过简洁的API设计，让复杂的树形选择变得异常简单。记住几个关键点：
- 开启复选框：设置
showCheckbox: true - 智能联动：默认开启父子节点状态同步
- 状态管理：使用
getChecked和setChecked方法 - 灵活配置：支持禁用节点、取消联动等高级功能
掌握了这些技巧，你就能轻松应对各种树形选择需求，大幅提升开发效率。赶紧动手试试吧！
【免费下载链接】layui一套遵循原生态开发模式的 Web UI 组件库，采用自身轻量级模块化规范，易上手，可以更简单快速地构建网页界面。项目地址: https://gitcode.com/GitHub_Trending/la/layui
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
