layui table怎么实现树形表格(treetable)

轻雪吖_6953

轻雪吖_6953

2026-10-05

211人浏览

原创

不能,layui 2.x 原生 table 不支持树形结构;必须使用第三方扩展如 whvse/layui-treetable,需配置 treecolindex、treeidname、treepidname 等参数,且后端数据须为含 _id 和 _parentid 的扁平数组。

layui table怎么实现树形表格(treetable)

layui 2.x 官方不支持 treetable,得靠第三方扩展

layui 原生 table 模块没有树形结构能力,官方从未提供 treeTable 组件。如果你在文档里看到“treetable”,那基本是混淆了 layui 3(未正式发布)的规划或第三方插件。实际项目中必须引入兼容 layui 2.x 的扩展库,最常用的是 whvse/layui-treetable(GitHub/Gitee 上 star 最多、维护较活跃)。

注意:别直接 npm install layui —— 它早已停止更新;也别用某些博客里贴的“几行 JS 手动递归渲染”方案,那种写法无法响应式展开/收起、不支持分页联动、也不兼容 table.on('tool') 等事件。

如何正确引入并初始化 layui-treetable

下载 layui-treetable.js 和配套 CSS 后,确保它在 layui.js 之后加载,并且不要和原生 table 混用同一容器:

layui.config({
  base: './lib/treetable/' // 指向你放 js/css 的目录
}).extend({
  treetable: 'treetable-lay'
});

layui.use(['treetable'], function() {
  var treetable = layui.treetable;

  treetable.render({
    treeColIndex: 1, // 第2列(索引从0开始)作为树形列
    treeSpid: '_parentId', // 父节点字段名,对应后端返回数据里的字段
    treeIdName: '_id',      // 当前节点唯一标识字段名
    treePidName: '_parentId', // 父节点标识字段名(常与 treeSpid 相同)
    height: 'full-100',
    url: '/api/menu/list',
    cols: [[
      {type: 'numbers'},
      {field: 'name', title: '菜单名称', width: 200},
      {field: 'code', title: '编码'},
      {field: 'sort', title: '排序'}
    ]]
  });
});

关键点:

  • treeColIndex 必须指向含节点名的列,且该列需启用 templet 或默认文本渲染 —— 不要在这里写操作按钮模板,否则图标错位
  • treeSpid 是“静态父 ID 字段”,用于首次加载时识别层级关系;不是动态传参用的
  • 后端返回的数据必须是**扁平数组**(非嵌套),每项含 _id 和 _parentId 字段,_parentId 为 null 或 0 表示根节点
  • 别在 cols 里对树形列设 fixed: 'left',会导致缩进图标错位

点击展开/收起没反应?检查这三处

常见静默失败原因不是代码写错,而是数据或配置细节偏差:

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

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

下载
  • 后端返回的 _parentId 字段值类型不一致:比如有的是 null,有的是字符串 "0",有的是数字 0 —— treetable 内部用 === 判等,务必统一为 null 或全部字符串
  • treeIdName 和 treePidName 对应的字段在数据中缺失或拼写错误(如写成 parentId 但后端返回的是 parent_id)
  • 表格容器父元素设置了 overflow: hidden,导致展开动画被截断,看起来像没反应

调试建议:打开浏览器控制台,在 Network 里看接口返回数据结构是否符合要求;再执行 layui.treetable.get(0)(0 是实例 index)查看内部解析后的树结构是否正确生成。

与 layui 原生 table 事件共存要注意什么

treetable 扩展重写了部分渲染逻辑,所以不能直接用 table.on('tool(filter)') 监听工具栏事件。它提供了自己的事件绑定方式:

treetable.on('tool(test)', function(obj){
  var data = obj.data;
  var event = obj.event;
  if(event === 'edit'){
    console.log('编辑节点:', data);
  }
});

但注意:treetable.on 的 filter 名必须和 treetable.render({ id: 'test' }) 中的 id 一致(不是 elem 的 ID)。另外,obj 对象里没有 tr 或 td 原生 DOM 引用,如需操作 DOM,得用 $(obj.tr) 或通过 data._tId 查找对应行。

如果同时用了 table.exportFile 导出,导出结果默认不含缩进和层级符号 —— 这是正常行为,treetable 并未接管导出逻辑,如需导出带层级的 Excel,得自己处理数据扁平化+添加空格前缀。

相关文章

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

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

下载

相关标签:

layui表格 layui

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

相关专题

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

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

2023.08.11

2263

5

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

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

2023.10.09

4863

6

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

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

2024.03.19

5970

13

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

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

2024.03.22

5458

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

60

10

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

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

2026.09.30

40

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

热门下载

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

精品课程

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

共87课时 | 12.7万人学习

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

共89课时 | 10.9万人学习

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

共5课时 | 1.6万人学习