因为项目有一个接口是多级组织架构的，所以需求是使用树状图表展示，然后表格控件用的bootstrap-table，通过官网的扩展地址找到了tree-grid 这个功能。
扩展地址：bootstrap-table扩展 建议经常使用这个控件的人fork
使用方法官网有，但是我这里还是贴一下，有一点提示大家：关系id 和 pid 是number数据类型，如果后台给的是string类型，记得转换一下，不然是不能成功的，我就吃了这个亏，虽然也是我自个没看清
（道个歉，我自己的不严谨，耽误了小伙伴们的时间！！！）
不过这个可以通过修改源码达到目的bootstrap-table-treegrid,修改为：
onCheckRoot: function (row, data) { var that = this; if (row[that.options.parentIdField] == '0') { return true; } else { return false; } }引用的各类文件我就不贴了，大家记得参考一下官网扩展代码：tree-grid
var $table = $('#table'); $(function() { $table.bootstrapTable({ url: '../json/treegrid.json', height: $(window).height(), striped: true, sidePagination: 'server', //这里是标志id 和 parentIdField有关系 idField: 'id', columns: [ { field: 'ck', checkbox: true }, { field: 'name', title: '名称' }, { field: 'status', title: '状态', sortable: true, align: 'center', formatter: 'statusFormatter' }, { field: 'permissionValue', title: '权限值' } ], //最主要的就是下面 定义哪一列作为展开项 定义父级标志 这里是pid //定义的列一定是要在表格中展现的 换言之就是上方有这个列 不然报错 treeShowField: 'name', parentIdField: 'pid', onLoadSuccess: function(data) { $table.treegrid({ initialState: 'collapsed', treeColumn: 1, expanderExpandedClass: 'glyphicon glyphicon-minus', expanderCollapsedClass: 'glyphicon glyphicon-plus', onChange: function() { $table.bootstrapTable('resetWidth'); } }); } }); }); // 格式化类型 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>'; } else { return '<span class="label label-default">锁定</span>'; } }下面是效果图，我个人觉得还是很OK的：
