当前位置：首页 > news >正文

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

news 2026/7/6 11:07:59

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>