Layui如何监听tree组件的节点展开和折叠事件

胖伟大大_9911

胖伟大大_9911

2026-07-17

844人浏览

原创

layui tree 组件无内置 expand/collapse 事件,需用 tree.on('node', ...) 结合 dom 状态判断展开折叠;或用 mutationobserver 监听子容器变化;亦可修改源码添加 spreadopen/spreadclose 回调。

layui tree 组件本身不提供 expand 或 collapse 这类内置事件,直接写 tree.on('expand', ...) 会静默失效——这是最常踩的坑。

为什么 tree.on('expand') 不生效

Layui 2.8.x 及之前版本的 tree 模块没有暴露展开/折叠的独立事件钩子。官方 API 文档中查不到 expand、collapse 或类似名称的事件类型。你看到的示例多是误传,或是混淆了其他 UI 库(如 Element Plus)的写法。

真正可用的监听入口只有两个:tree.on('click', ...) 和 tree.on('node', ...),但它们的行为和触发时机有关键差异:

  • click 是原生点击事件,能捕获任意节点点击,但无法区分是展开、折叠还是纯文本点击
  • node 事件只在用户点击「带子节点的展开图标」时触发,且仅返回被点击节点数据,不带状态标识

用 tree.on('node', ...) + 状态判断实现准展开监听

虽然 node 事件不直接告诉你“这次是展开还是折叠”,但可以通过 DOM 状态反推:节点是否已展开,取决于其子节点容器是否可见,以及图标类名是否为 layui-icon-subtraction。

实操建议:

  • 监听 tree.on('node', function(obj){...}),拿到 obj.data 和 obj.elem
  • 用 $(obj.elem).next('.layui-tree-body').length 判断子容器是否存在(避免空节点误判)
  • 检查图标元素:$(obj.elem).find('.layui-icon').hasClass('layui-icon-subtraction') → 当前是折叠态;hasClass('layui-icon-addition') → 当前是展开态
  • 注意:这个判断必须在事件回调内立即执行,不要依赖 setTimeout,因为图标类名是同步更新的

示例代码片段:

tree.on('node', function(obj){
  const $icon = $(obj.elem).find('.layui-icon');
  const isExpanded = $icon.hasClass('layui-icon-subtraction');
  console.log('节点', obj.data.id, isExpanded ? '即将收起' : '即将展开');
});

监听展开/折叠后的真实 DOM 变化(兼容旧版 & 异步场景)

如果你需要在子节点真正显示/隐藏完毕后再执行逻辑(比如调整表格高度、刷新关联组件),不能依赖 node 事件的即时性——因为子节点渲染是异步的,且可能涉及 AJAX 加载。

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

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

下载

更稳妥的做法是监听 DOM 变化或使用 tree.reload() 的回调:

  • 对子容器 .layui-tree-body 使用 MutationObserver 监听 display 或 height 变化(适合精确控制)
  • 若用了异步加载,在 tree.reload() 的 done 回调里处理,此时子节点 DOM 已就位
  • 避免轮询 offsetHeight 或 getComputedStyle().height,性能差且易漏判

特别提醒:Layui Tree 没有 on('expandDone') 这类钩子,所有“展开完成”逻辑都得自己兜底。

扩展源码添加 spreadOpen/spreadClose 回调(仅限可改源码场景)

如果你能修改 layui/tree.js,可在源码中找到展开/折叠逻辑块(通常在 toggleNode 方法内),插入自定义回调:

  • 展开分支末尾加:options.spreadOpen && options.spreadOpen({elem: elem, data: item});
  • 折叠分支末尾加:options.spreadClose && options.spreadClose({elem: elem, data: item});
  • 然后初始化时传入:spreadOpen: function(){...}, spreadClose: function(){...}

这种方式最干净,但要求部署环境允许修改 Layui 源文件,且每次升级 Layui 都需重新 patch。

真实项目中,多数人卡在“以为有事件却找不到”,其实问题不在写法,而在默认就不支持——得换思路,而不是硬套别家 API。

相关文章

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

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

下载

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

相关专题

更多
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

40

12

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

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

2026.09.30

40

26

PixTV AI视频生成与无限画布创作
PixTV AI视频生成与无限画布创作

PixTV专题整理AI视频与视觉内容创作相关功能使用教程,涵盖AI生图、视频生成、无限画布、多模型创作、素材管理、声音音乐及视频剪辑等功能,帮助用户快速掌握PixTV从创意到成片的完整制作方法。

2026.09.29

60

15

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

2026.09.23

280

15

Buffalo框架路由与请求处理实操指南
Buffalo框架路由与请求处理实操指南

本专题讲解Buffalo框架路由与请求处理机制,涵盖路由注册与分组、资源路由、Handler编写规范、Context上下文方法、参数绑定、中间件编写挂载、Session与Cookie读写、Flash消息及错误页面定制方法。

2026.09.23

160

15

Buffalo框架零基础入门教程
Buffalo框架零基础入门教程

本专题整理Buffalo框架入门内容,涵盖Go环境准备、buffalo CLI安装、新项目生成、目录结构说明、dev热加载启动、数据库连接配置与常见报错排查,帮助新手按约定优于配置的思路跑通第一个Buffalo框架应用。

2026.09.23

120

15

Conan创建软件包配方指南
Conan创建软件包配方指南

本专题介绍通过conanfile.py创建软件包的方法,讲解包名、版本、依赖和构建设置等基础信息,以及source、build、package、package_info等常用方法的作用及编写思路。

2026.09.22

80

12

热门下载

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

精品课程

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

共87课时 | 12.7万人学习

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

共89课时 | 10.9万人学习

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

共5课时 | 1.6万人学习