bootstrapTable+treegrid 树形表格记录：表格显示数据，但不显示树形结构
官方示例：https://live.bootstrap-table.com/example/extensions/treegrid.html
解决思路及原因说明：
数据规则 与 treegrid 要求的规则不同，treegrid 的顶级节点，需要值为 0 ，而不是 -1 。
而我的树形表格的数据，如果是顶级节点，则值为 -1 ，导致数据与 treegrid 一直匹配不成功，直接将全部节点显示为顶级节点。
尝试直接用 json 数据（仅为了测试），将父 id 循环 修改为 0 后，就正常显示了（至于为什么改成0就可以，并未深究）。
默默流了一把心酸泪... ε(┬┬﹏┬┬)3
找到问题原因，是因为看了这篇文章：
https://www.cnblogs.com/oldwei/p/10068245.html （【插件篇】前段bootstrap-table-treegrid试手，解决无法显示树形列表或者图标不显示问题。）
之后 ，才慢慢往这方面找问题，才正常解决问题。
表格代码部分：
var $table = $('#table'); // 初始化表格 $table.bootstrapTable({ data: GetList, // 接口返回数据与插件 treegrid 所需数据规则不一致，此处是将父级id为-1处理成0后的数据 idField: 'ID', dataType: 'jsonp', columns: [ { field: 'check', checkbox: true, formatter: function (value, row, index) { if (row.check == true) { // console.log(row.serverName); //设置选中 return { checked: true }; } } }, { field: 'Name', title: '名称', align: "left" }, { field: 'Num', title: '编号', sortable: true, align: 'center' }, { field: 'Desc', title: '描述', align: 'center' } , { field: 'ParentName', title: '上级' , align: 'center' } , { field: 'AddTime', title: '新增时间', align: "center", formatter: "AddTimeFormatter" } ], // bootstrap-table-treegrid.js 插件配置 -- start //在哪一列展开树形 treeShowField: 'Name', //指定父id列 parentIdField: 'ParentID', onPostBody: function () { var columns = $table.bootstrapTable('getOptions').columns; //debugger if (columns && columns[0][1].visible) { $table.treegrid({ initialState: 'collapsed',// 所有节点都折叠 treeColumn: 1, expanderExpandedClass: 'glyphicon glyphicon-menu-down', // 展开时，图标样式 expanderCollapsedClass: 'glyphicon glyphicon-menu-right', // 折叠时，图标样式 onChange: function () { $table.bootstrapTable('resetView'); // 重置表格宽高 } }); } } // bootstrap-table-treetreegrid.js 插件配置 -- end });
完整示例代码：
<!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width,initial-scale=1.0" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>系统管理</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css" rel="stylesheet"> <link href="https://unpkg.com/bootstrap-table@1.18.2/dist/bootstrap-table.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-treegrid/0.2.0/js/jquery.treegrid.min.js"></script> <script src="https://unpkg.com/bootstrap-table@1.18.2/dist/bootstrap-table.min.js"></script> <script src="https://unpkg.com/bootstrap-table@1.18.2/dist/extensions/treegrid/bootstrap-table-treegrid.min.js"> </script> </head> <body> <table id="table"></table> </body> <script> var $table = $('#table'); var data = JSON.parse( '[{"id":1,"pid":0,"status":1,"name":"用户管理","permissionValue":"open:user:manage"},' + '{"id":2,"pid":0,"status":1,"name":"系统管理","permissionValue":"open:system:manage"},' + '{"id":3,"pid":1,"status":1,"name":"新增用户","permissionValue":"open:user:add"},' + '{"id":4,"pid":1,"status":1,"name":"修改用户","permissionValue":"open:user:edit"},' + '{"id":5,"pid":1,"status":0,"name":"删除用户","permissionValue":"open:user:del"},' + '{"id":6,"pid":2,"status":1,"name":"系统配置管理","permissionValue":"open:systemconfig:manage"},' + '{"id":7,"pid":6,"status":1,"name":"新增配置","permissionValue":"open:systemconfig:add"},' + '{"id":8,"pid":6,"status":1,"name":"修改配置","permissionValue":"open:systemconfig:edit"},' + '{"id":9,"pid":6,"status":0,"name":"删除配置","permissionValue":"open:systemconfig:del"},' + '{"id":10,"pid":2,"status":1,"name":"系统日志管理","permissionValue":"open:log:manage"},' + '{"id":11,"pid":10,"status":1,"name":"新增日志","permissionValue":"open:log:add"},' + '{"id":12,"pid":10,"status":1,"name":"修改日志","permissionValue":"open:log:edit"},' + '{"id":13,"pid":10,"status":0,"name":"删除日志","permissionValue":"open:log:del"}]'); $(function () { $table.bootstrapTable({ //url: 'json/treegrid.json', data: data, // 数据源 idField: 'id', showColumns: true, columns: [{ field: 'ck', checkbox: true }, { field: 'name', title: '名称' }, { field: 'status', title: '状态', sortable: true, align: 'center', formatter: 'statusFormatter' }, { field: 'permissionValue', title: '权限值' } ], treeShowField: 'name', parentIdField: 'pid', onPostBody: function () { var columns = $table.bootstrapTable('getOptions').columns; //debugger if (columns && columns[0][1].visible) { $table.treegrid({ initialState: 'collapsed', // 所有节点都折叠 treeColumn: 1, expanderExpandedClass: 'glyphicon glyphicon-menu-down', // 展开时，图标样式 expanderCollapsedClass: 'glyphicon glyphicon-menu-right', // 折叠时，图标样式 onChange: function () { $table.bootstrapTable('resetView'); // 重置表格宽高 } }); } //只展开树形的第一级节点 //$table.treegrid('getRootNodes').treegrid('expand'); } }) }) function typeFormatter(value, row, index) { if (value === 'menu') { return '菜单' } if (value === 'button') { return '按钮' } if (value === 'api') { return '接口' } return '-' } function statusFormatter(value, row, index) { if (value === 1) { return '<span class="label label-success">正常</span>' } return '<span class="label label-default">锁定</span>' } </script> </html>
示例效果图：
感谢查阅，希望能解决您所遇问题！ (*^▽^*)
