Layui如何实现树形表格treeTable的全选功能逻辑

夏瑶同学_5513

夏瑶同学_5513

2026-07-10

659人浏览

原创

treeTable全选不能用layui.table.checkAll,因其不支持层级关系;需手动遍历数据生成ID列表,调用setChecked并配合setCheckStatus清空状态,再用getChecked获取真实选中项。

treeTable 全选功能为什么不能直接用 layui.table.checkAll

因为 layui.treetable 不是原生 layui.table,它通过递归渲染节点、维护父子关系,checkall 方法只作用于当前表格 dom 的 tr 行,无法识别层级关系和折叠状态。直接调用会漏选子节点,或在折叠状态下把不可见节点也“假选中”。

真正可行的路径是:手动遍历树结构数据,按展开/折叠状态决定是否递归选中子节点,并同步更新 UI 和 checked 状态缓存。

如何安全触发全选并保持父子联动

核心是调用 treeTable.setChecked 并传入完整节点 ID 列表,但列表必须动态生成——不能硬写死所有 ID,要根据当前可视节点(已展开)+ 隐藏节点(折叠但需强制选中)做区分处理。

  • 若业务要求「全选 = 选中全部数据(无论是否展开)」,则遍历原始数据源(data 配置项),用深度优先收集所有 id 字段值
  • 若要求「全选 = 仅选中当前可见节点(含已展开的子节点)」,需调用 treeTable.getData 获取当前渲染后的扁平化数据,过滤出 isParent === false || isExpand === true 的节点
  • 务必在调用 setChecked 前,先用 treeTable.setCheckStatus 清除已有选中态,避免叠加错误

父子节点自动勾选的坑:expand 和 check 顺序不能错

当用户点击父节点复选框时,Layui treeTable 默认不自动操作子节点;必须自己监听 checkbox 事件并手动处理。这里有两个关键陷阱:

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载
  • 不要在 done 回调里立即调用 setChecked —— 此时 DOM 尚未渲染完,子节点 tr 可能还未挂载,导致部分节点漏设
  • 正确做法是:监听 treeTable.on('checkbox(...),拿到 res.id 后,用 setTimeout(() => { ... }, 0) 延迟执行子节点操作,确保 DOM 已就绪
  • 检查子节点是否存在,要用 treeTable.getNodeChildren(res.id) 而非直接查 DOM,否则折叠状态下返回空数组,误判为无子节点

示例:带展开逻辑的全选按钮绑定

假设你的 treeTable 实例名是 inst,ID 字段为 id,且你希望「全选」包含所有数据(不管折叠):

// 全选按钮点击事件
document.getElementById('btn-check-all').onclick = function() {
  // 1. 获取原始数据(注意:不是 getData(),而是初始化时传入的 data 或 reload 用的数据源)
  const allIds = [];
  function collectIds(nodes) {
    nodes.forEach(node => {
      allIds.push(node.id);
      if (node.children && node.children.length) {
        collectIds(node.children);
      }
    });
  }
  collectIds(inst.config.data || []); // 或从你维护的数据源取

  // 2. 强制设置所有 ID 为已选
  layui.treeTable.setChecked('test', allIds);

  // 3. 如果需要反向同步到原始数据(如提交前读取),记得更新你自己的 data 结构中的 checked 字段
};

注意:setChecked 第二个参数必须是数组,哪怕只有一个 ID;ID 类型要和你在列中配置的 id 字段类型一致(字符串 or 数字),混用会导致静默失败。

最易被忽略的是:treeTable 的 checked 状态默认不持久化到原始数据对象上,提交表单前若直接遍历 inst.config.data 取 checked,大概率全是 undefined。得用 treeTable.getChecked('test') 主动拉取当前选中节点快照。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

layui

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2283

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

4923

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6030

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

5518

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

783

5

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

2026.09.30

80

10

LLVM RISC-V参数配置教程
LLVM RISC-V参数配置教程

本专题介绍LLVM对RISC-V基础ISA和扩展的支持方式,涵盖RV32、RV64、标准扩展、实验性扩展、厂商扩展、-menable-experimental-extensions和版本差异。

2026.09.30

80

14

LLVM IR中间表示入门指南
LLVM IR中间表示入门指南

本专题整理LLVM IR的核心概念,包括中间表示作用、模块结构、函数、基本块、SSA形式、类型系统和常见语法,帮助新手理解LLVM编译流程中的关键层。

2026.09.30

80

12

PDF转图片方法
PDF转图片方法

需要把 PDF 页面用于上传、预览、分享或图片归档时,PDF 转图片方法专题整理 JPG/PNG 格式选择、逐页导出、清晰度设置、批量下载和结果检查等流程,帮助用户稳定完成 PDF 图片化处理。

2026.09.30

60

26

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.7万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 10.9万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习