3分钟掌握Layui树形复选框：多选联动全攻略

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设计，让复杂的树形选择变得异常简单。记住几个关键点：

1. 开启复选框：设置showCheckbox: true
2. 智能联动：默认开启父子节点状态同步
3. 状态管理：使用getChecked和setChecked方法
4. 灵活配置：支持禁用节点、取消联动等高级功能

掌握了这些技巧，你就能轻松应对各种树形选择需求，大幅提升开发效率。赶紧动手试试吧！

【免费下载链接】layui一套遵循原生态开发模式的 Web UI 组件库，采用自身轻量级模块化规范，易上手，可以更简单快速地构建网页界面。项目地址: https://gitcode.com/GitHub_Trending/la/layui