Bootstrap Table treegrid 树形表格扩展实战指南扁平数据怎么变成层级表格【免费下载链接】bootstrap-tableAn extended table for integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)项目地址: https://gitcode.com/gh_mirrors/bo/bootstrap-table如果你的数据天然有层级——部门、文件目录、商品分类菜单——平铺的表格没法把父子关系讲清楚。Bootstrap Table treegrid 是 Bootstrap Table 项目官方的树形表格扩展给它一份扁平数组再告诉它哪列是行 id、哪列是父级 id它就能搭出缩进的树形结构并带上展开/折叠交互。下面从源码出发讲清楚它实际做了什么、以及你该配哪些选项。 适用场景速览哪些数据适合上 treegrid这个扩展本质是两层结构Bootstrap Table 负责表格本体的渲染、排序、搜索jquery-treegridv0.3.0一个负责画展开按钮和连接线的小 jQuery 插件叠加在表体上处理树形交互。所以它适合一行 一个节点、父子链清晰的数据。组织架构部门—小组—人员的层级关系或者菜单带权限项的权限树是最典型的两类。文件目录管理后台里的目录树、文件夹和文件混排的结构天然就是一张 pid 指向父级的表。分类菜单电商商品分类、CMS 导航位这种三四层的结构用树形展示比拆成多级页面直观得多。这三类的共同点每一行都能用一个字段指向自己的父行。做不到这一点的数据先别硬套树形。最小可运行示例5 分钟跑通第一棵表格树让表格变成树需要三件事把依赖文件引进来、初始化选项里写树形配置、在onPostBody表体渲染完成后的回调里补一次.treegrid()调用。引入依赖扩展依赖三层资源jQuery、Bootstrap Table 核心以及 jquery-treegrid v0.3.0 的 CSS 和 JS。link relstylesheet hrefcss/jquery.treegrid.min.css link relstylesheet hrefcss/bootstrap-table.min.css script srcjs/jquery.min.js/script script srcjs/jquery.treegrid.min.js/script script srcjs/bootstrap-table.min.js/script !-- treegrid 扩展本体 -- script srcjs/extensions/bootstrap-table-treegrid.min.js/scriptjquery-treegrid 的 CSS 漏引会出现按钮和连接线错位的问题后文的踩坑一节会专门讲。准备数据扁平而不是嵌套很多人第一反应是把嵌套数组传给扩展但 treegrid 要求扁平数据——所有行平铺在同一层父子关系只靠两个字段表达[ { id: 1, name: 总公司, pid: 0 }, { id: 2, name: 技术部, pid: 1 }, { id: 3, name: 市场部, pid: 1 }, { id: 4, name: 前端组, pid: 2 }, { id: 5, name: UI 小组, pid: 4 } ]后端如果返回的是嵌套树先递归展平再交给表格。初始化$(#treeTable).bootstrapTable({ data: treeData, treeShowField: name, // 树形展示的字段命中列字段后自动开启树模式 idField: id, // 行唯一 id 字段默认 id parentIdField: pid, // 父级 id 字段默认 pid columns: [ { field: name, title: 名称 }, { field: desc, title: 说明 } ], onPostBody: function () { // 表体渲染完成后触发 $(#treeTable).treegrid({ treeColumn: 0, // 展开按钮放在第几列 onChange: function () { // 展开/折叠后同步一次表格视图 $(#treeTable).bootstrapTable(resetView) } }) } })两个容易漏的点treeShowField不只是选个展示字段它其实是树模式的开关onPostBody里不调.treegrid()表格能渲染但行上不会有展开按钮。原理拆解扁平数据如何变成树上一节给了用法这一节看源码实际做了什么出问题时才知道往哪查。idField 与 parentIdField 的匹配规则判定父子关系就一句话某行的parentIdField父级 id 字段值等于另一行的idField唯一 id 字段值它就是后者的子节点。源码里initTr行初始化方法对当前行做一次全量 filter 找出所有子行再逐个递归。注意这里是严格相等匹配id 和 pid 的类型必须一致。递归渲染与根节点识别入口在initRow行渲染方法先判断当前行是不是根节点——pid等于rootParentId或pid是0、null这类空值——是根节点才启动递归否则直接跳过它会被父行的递归带出来。每深入一层行上会写入三个内部字段_level层级深度、_parent父行引用、_last是否最后一个子节点画连接线用同时行样式被包了一层追加treegrid-{id}和treegrid-parent-{pid}两个 class——这是 jquery-treegrid 定位节点、绘制连接线的抓手。另外源码initHeader表头初始化里还有一步只要treeShowField指定的字段出现在列定义里就把内部开关treeEnable置为 true。这也是只配treeShowField就能启用树模式的由来。展开折叠归 jquery-treegrid 管Bootstrap Table 本身不画展开按钮。表体渲染完后你在onPostBody里调的.treegrid()会扫描那些treegrid-*class注入展开按钮和连接线点击后的onChange回调负责让表格resetView避免折叠后行高和表头不同步。整体流程扁平数据每行带 id pid ↓ initHeadertreeShowField 命中列字段 → 自动 treeEnable true ↓ initRow识别根节点pid rootParentId 或空值 ↓ initTr逐节点全量匹配子行递归渲染 写入 _level / _parent / _last 与 treegrid-* class ↓ onPostBody.treegrid() 注入展开按钮与连接线 ↓ 点击展开/折叠 → onChange → resetView 刷新视图顺带一提逐节点全量扫描意味着数据量大时建树的开销不低这也是大数据量要走服务端分层加载的另一个理由。treegrid 五个配置项速查重点讲三个扩展在默认值里一共注册了 5 个选项选项类型默认值含义treeEnableBooleanfalse树模式总开关treeShowFieldStringnull树形展示的字段名命中列字段则自动启用树模式idFieldStringid行唯一 id 字段名parentIdFieldStringpid父级 id 字段名rootParentIdString | Number | nullnull标记根节点的父级 id 值treeShowField 才是真正的开关treeEnable: true可以手动打开树模式但更推荐只写treeShowField它一份配置干两件事——指定树形展示哪个字段同时触发自动启用。源码里这条自动启用逻辑就在initHeader不需要你额外记一个布尔开关。rootParentId 与根节点判定源码的根节点判定是rootParentId 行的pid || 行的pid为空值。后半段意味着0、null、都算根只有当你的数据用非空值标记根比如-1时才需要显式设置rootParentId。idField 与 parentIdField 要严格相等这两个字段决定父子匹配。除了字段名要和数据对上还要注意值类型匹配用的是严格相等后端把数字 id 序列化成字符串时两边要么都转成字符串要么都保证是数字否则树断在根上。进阶定制三个常用手法手法一控制初始展开状态与自定义按钮默认树是全展开的。.treegrid()里的initialState控制初始状态两个expander*Class参数替换展开/折叠按钮的图标 class接你自己的图标库即可不用动扩展本体onPostBody: function () { $(#treeTable).treegrid({ treeColumn: 0, initialState: collapsed, // 初始折叠写 expanded 则全展开 expanderExpandedClass: glyphicon glyphicon-triangle-bottom, expanderCollapsedClass: glyphicon glyphicon-triangle-right, onChange: function () { $(#treeTable).bootstrapTable(resetView) } }) }手法二远程接口配非标准根节点接口用parentId: -1标记根节点时把rootParentId: -1和字段名一起配好即可$(#treeTable).bootstrapTable({ url: /api/tree, // 数据源依旧是扁平数组 treeShowField: title, parentIdField: parentId, // 与默认 pid 不同显式声明 rootParentId: -1, // 根节点标记值 columns: [ { field: title, title: 标题 } ], onPostBody: function () { /* 同前调 .treegrid() */ } })注意远程接口返回的仍必须是扁平数据扩展本身不会按节点去拉子级。手法三动态增删节点后自动重建树onPostBody在表体每次重绘包括append、remove、刷新后都会触发所以你在回调里写的.treegrid()会跟着重新执行动态改数据不用额外处理。前提是让表格走标准方法改数据改完触发一次重绘绕过表格直接操作 DOM 的做法树形状态就不会同步。⚠️ treegrid 踩坑手册分页、搜索与连接线按现象→原因→解法记四个高频问题。分页冲突树被切散现象开了pagination: true后某页出现孤立的子行展开它看不到父级层级断掉。 原因分页是对扁平数据按行切片而树结构是整份数据的属性一片切片里往往不含完整的父子链。 解法小数据直接pagination: false一页放下大数据做服务端树形分页——首屏只返回根节点用户展开某个节点时再按需请求它的子级并 append 进数据扩展对扁平数据做追加是顺手的。搜索匹配不到子节点的上下文现象搜某个只在子行出现的关键词结果里只剩这一行父级链没了看着像孤立数据。 原因内置搜索按行独立过滤子行匹配了祖先行不匹配就被滤掉。 解法在onSearch回调里做后处理——对每条命中的行沿 pid 链向上找到所有祖先把它们补回结果集再让表格重绘。不需要改扩展源码。渲染层连接线错位、按钮缺失与 virtualScroll 失效现象一行都在但没有展开按钮。多半是onPostBody里的.treegrid()没调用或 jquery-treegrid 的 JS 没加载。 现象二按钮在连接线错位。检查 CSS 是否引入如果第一列是复选框列而treeColumn还是 0按钮就长错了列把它调到目标列的下标即可。 现象三给万行树开了virtualScroll: true却没效果。这不是配置错误——源码initBody里treeEnable为 true 时会强制把virtualScroll置回 false两者互斥。大树的正确思路还是回到第一条的按层加载控制 DOM 总量。总结与延伸阅读treegrid 扩展的分工很清晰Bootstrap Table 负责渲染扩展靠 id/parentId 把扁平数据搭成树jquery-treegrid 负责展开折叠的界面。数据保持扁平、字段配得准确就能得到一棵可交互的树形表格。延伸阅读treegrid 中文文档官方选项说明与数据结构约定含全部选项的类型和默认值treegrid 英文文档同篇内容的英文版检索关键词时用得上扩展源码全文约百来行配合本文原理拆解一节可以直接读【免费下载链接】bootstrap-tableAn extended table for integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)项目地址: https://gitcode.com/gh_mirrors/bo/bootstrap-table创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
