Bootstrap Table treegrid 扩展：树形表格与 parentId 层级展示配置指南

Bootstrap Table treegrid 扩展树形表格与 parentId 层级展示配置指南【免费下载链接】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 扩展就是为这类树形表格准备的它让普通表格根据每行的 parentId 自动组织成可展开、可折叠的父子结构。这篇文章给出最小可用的 treegrid 配置讲清展示字段、根节点、展开折叠三者之间的关系以及它和搜索、分页、自定义列怎么配合。这类层级页面适合什么数据treegrid 处理的是“扁平数组 父子引用”的数据每一行同时带一个唯一 id 和一个指向父级 id 的字段。典型场景有电商品类目录一级类目、二级类目、叶子商品类天然是一棵树。后台菜单一级菜单、子菜单、按钮权限用 parentId 串起来。知识库 / 文档目录栏目下挂文档文档下挂章节。区域机构省、市、区三级或公司—部门—小组。判断标准很简单关系是“一个父节点对多个子节点”、深度不会太夸张、且后端返回的是打平的列表。如果后端直接给的是带 children 的嵌套结构先拍平成父子引用再交给 treegrid。它和普通表格差在哪里普通表格按数据给定的顺序逐行渲染行间没有从属关系treegrid 扩展则按父子引用重新排布行序并借助依赖插件画出缩进和展开按钮。渲染分三步完成扩展按 parentId 匹配把行排成父子顺序给每行加上 treegrid- 前缀的类名依赖的 treegrid 插件在渲染后读取这些类画出缩进、连接线和展开按钮展开或折叠由插件触发回调里通常再调一次 resetView 刷新布局。这里要区分清楚Bootstrap Table 的扩展本身只负责“把行排好、打好类名”真正的展开折叠交互来自外部的 treegrid 插件所以页面里两个脚本缺一不可。最小可用的 treegrid 配置先准备一份打平的层级数据这里用品类目录举例[ { id: 1, pid: 0, name: 数码 }, { id: 2, pid: 1, name: 手机 }, { id: 3, pid: 1, name: 电脑 }, { id: 4, pid: 2, name: 5G 手机 }, { id: 5, pid: 2, name: 折叠屏 }, { id: 6, pid: 3, name: 笔记本 }, { id: 7, pid: 6, name: 轻薄本 }, { id: 8, pid: 0, name: 家电 } ]初始化时关键是四个字段idField 指定唯一 id 所在列parentIdField 指定父级 id 所在列treeShowField 指定树形展示在哪一列rootParentId 指定根节点的父值。$(#catTable).bootstrapTable({ data: categoryData, idField: id, parentIdField: pid, treeShowField: name, rootParentId: 0, columns: [ { field: name, title: 品类名称 }, { field: sort, title: 排序 } ], onPostBody: function () { $(#catTable).treegrid({ treeColumn: 0, initialState: expanded, onChange: function () { $(#catTable).bootstrapTable(resetView) } }) } })onPostBody 里的 treegrid 调用不能省略它告诉插件在哪一列画展开按钮treeColumn0 表示第一列、初始是展开还是折叠并在切换后刷新表格。如何配置 parentId 与展示字段的层级关系层级结果完全由字段匹配决定理解下面几条就不会出怪父子匹配一行的 parentIdField 值等于另一行的 idField 值就构成父子。两个字段必须类型一致数字 id 就都用数字字符串 id 就都用字符串1 和 1 对不上。根节点判定当某行的 parentId 等于 rootParentId或该值为空0、null、空串、undefined时就被当作根。所以 pid 填 0、而 rootParentId 用默认 null 时0 恰好被当成根能正常工作。如果你的接口用 -1 表示顶级就把 rootParentId 设成 -1。treeShowField 的双重作用它既指定树形展示列又会在该列命中 columns 时自动开启树形模式所以一般不用单独设 treeEnable。找不到父级的行不会显示它的父节点不在当前数据里时这一行就成了“孤儿”直接不渲染。树形表格与搜索、分页如何配合treegrid 是基于“当前表格里有哪些行”来组树的这一点决定了它和搜索、分页的关系。树形表格与分页如何配合客户端分页会把整棵树切成几页父行在上一页、子行在下一页时跨页的父子链就断了。最稳妥的做法是给树形数据关掉分页pagination: false一次性加载完整集合数据量真的大到必须分页时让后端按“根 全量子节点”或按展开状态返回而不是简单按页码切。另外扩展启用后会自动关闭虚拟滚动避免两者冲突。搜索与自定义列开启 search 后Bootstrap Table 会先过滤行再组树某个父行被过滤掉时它的子孙就够不着树会显得“缺胳膊少腿”。小树建议关掉搜索或接受这种表现。自定义列的 formatter 照常可用而且每行都带了扩展写入的 _level根为 0、逐层 1可以据此加深度标记展开按钮放哪一列由 treeColumn 决定。$(#catTable).bootstrapTable({ search: true, pagination: false, columns: [ { field: name, title: 品类名称, formatter: function (value, row) { const mark row._level ? small classtext-mutedL row._level /small : return value mark } } ] })展开折叠的初始状态与视觉细节展开折叠字段treeShowField怎么选把 treeShowField 设成“名称”这类可读列最直观展开按钮和缩进会跟在这一列。选错列设成一个不存在的字段或纯数字列时树形模式不会自动开启表格就退回平铺状态。视觉上需要记两点连接线、缩进来自 treegrid 插件自带的样式页面里要一并引入它的 CSS否则能看到缩进类名却看不到竖线切换展开折叠后调用 resetView是为了让 Bootstrap Table 的列宽、固定布局重新对齐。树形表格快速排障只有平铺、没有展开按钮treegrid 插件脚本没引入或 onPostBody 里没调用 treegrid或 treeShowField 没命中任何列。只显示根节点、看不到子级id 和 parentId 类型不一致或 parentId 的值对不上任何 id比如多了空格、字符串与数字混用。部分行缺失这些行的父节点不在当前数据里多半是被搜索过滤掉或落在别的页。连接线不显示漏引入了 treegrid 的样式文件。虚拟滚动不生效这是扩展主动关闭的属预期行为。动手练习把后台菜单变成树形表格给你一份打平的菜单数据字段为 id、pid、name、path完成以下要求即可算通过用 treeShowField: name 渲染出可展开的菜单树根节点 pid 为 0增加一列 formatter 展示 path并在有 _level 的行加上 L1 / L2 这样的层级标记把 initialState 设为 collapsed确认顶层默认收起、点开展开按钮能逐级显示子菜单故意把某一行的 id 改成字符串、另一行保持数字观察树在哪一层断开再改回来验证恢复。做完这四步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），仅供参考