Layui如何实现点击按钮一键折叠或展开所有的树形表格节点-Layui教程-PHP中文网

treeTable.expandAll() 和 treeTable.foldAll() 是 layui 官方 treetable 模块（2.8+）或 treetable-lay 插件（v2.1.0+）提供的批量展开/折叠 API，需确保模块正确引入、命名一致、实例已渲染且传入有效容器选择器。

treeTable.expandAll() 和 treeTable.foldAll() 是最直接的调用方式

layui 的官方 treetable 模块（非原生 tree 组件）提供了两个明确的 api：expandall 和 foldall，专用于批量控制所有节点展开/折叠状态。前提是必须使用的是 layui 官方 2.8+ 的 treetable，或社区广泛采用的 treetable-lay 插件（如 v2.1.0+），否则这些方法不存在。

常见错误是直接在 layui.use(['treeTable']) 中调用却报错 treeTable.expandAll is not a function——这通常因为：

实际加载的是旧版自定义模块（比如叫 treetable 而非 treeTable），命名不一致
未正确引入插件 JS 文件，或 extend 配置路径错误导致模块未注册
渲染实例未保存，后续调用时找不到对应表格容器（elem 选择器不匹配）

正确做法是先确保渲染后拿到实例 ID 或 DOM 选择器，并在按钮点击时传入该标识：

$('#btn-expand').on('click', function() {
  treeTable.expandAll('#treeTableDemo'); // 传入表格容器的 id 选择器
});
$('#btn-fold').on('click', function() {
  treeTable.foldAll('#treeTableDemo');
});

使用 treetable-lay 插件时必须注意 extend 配置和模块名

如果你用的是第三方增强版 treetable-lay（目前最主流的树表方案），它的模块名不是 treeTable，而是你 extend 里定义的别名，比如 treetable。此时调用方式完全不同：

必须严格匹配 extend 中注册的名称，且初始化时要显式 use 该模块：

layui.config({
  base: '/static/modules/' // 指向 treetable-lay 所在父目录
}).extend({
  treetable: 'treetable-lay/treetable' // 这里定义的 key 就是后续 use 的模块名
});

layui.use(['treetable', 'table'], function() {
  var treetable = layui.treetable; // 注意：不是 layui.treeTable
  treetable.render({ elem: '#table1', url: '/api/tree' });

  $('#btn-expand').click(function() {
    treetable.expandAll('#table1'); // 参数仍是表格容器选择器
  });
});

容易踩的坑：

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

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

下载

base 路径末尾不加斜杠，或相对路径写错，会导致 404 Not Found 加载失败
模块名大小写敏感：treetable ≠ Treetable
expandAll 必须在 render 成功执行后调用，否则表格 DOM 还未生成，操作无效

手动触发图标点击仅适用于原生 tree 组件，慎用于 treeTable

网上流传的“遍历 .layui-icon-addition 并 dispatchEvent”方案，本质是模拟用户点击行为，它只对 layui 原生 tree 组件有效，因为其 DOM 结构固定、图标类名稳定。但 treeTable 的展开图标是通过列模板动态渲染的，可能被包裹在 <div> 或 <code><span></span> 内，且 class 名可能带随机前缀或条件 class（如 layui-icon-triangle-r），DOM 查询极易失效。

所以除非你确认用的是 tree（不是 treeTable），否则不要用这种 hack 方式。它的问题包括：