bootstrap table 二级树形表格实现方法（非引用插件）

实际上，bootstrap或者layui的table都有对应的treegrid插件来实现表格数据的树形展示。但layui的treegrid插件似乎对复杂表头的支持不大好，而在我使用bootstrap的treegrid插件时一直出现样式问题（当然应该是我自己的问题）。于是，我准备自己代码实现一个二级树形表格。所以，此贴给本着学习的态度或者就是不想用插件的同学使用。

实现的效果如下：

当然，想学习这两个treegrid树形插件的同学，可以去官方文档学习，很ez。
友情链接1：layui treegrid
友情链接2：bootstrap treegrid

不用插件的代码实现思路：利用bootstrap table的隐藏显示行的方法来模拟数据行的树形折叠效果。

一、表头和数据的格式处理：

1、表头中的第一列需要对返回值进行格式化，目的是为了在文字的前面加上向右的箭头来表示数据可以向下展开。
2、且对该添加的箭头绑定点击事件（可以加上鼠标移上去时候的小手样式）
3、而对返回数据的处理中，需加上父子级id的关系（如下面的代码）
注：此处的箭头是利用的layui的字体图标，当然也可以用bootstrap的。

let columns = [[{title: '班组',field: 'team',align: 'center',valign: 'middle', rowspan:2,formatter: function (value, row, index) {row.index = index;if (row.teamStyle == 1){return " "+ value +"";} else {return "     " + value;}}},{title: '2019第一季度',field: '',align: 'center',valign: 'middle',colspan:3}],[{title: '1月',field: '2019-01',align: 'center',valign: 'middle',},{title: '2月',field: '2019-02',align: 'center',valign: 'middle',},{title: '3月',field: '2019-03',align: 'center',valign: 'middle',},]]let data = [{'team':'班组1','teamId':'1','teamParentId':'','2019-01':22,'2019-02':33,'2019-03':44},{'team':'用户1','teamId':'12','teamParentId':'1','2019-01':1,'2019-02':3,'2019-03':4},{'team':'用户2','teamId':'13','teamParentId':'1','2019-01':1,'2019-02':'','2019-03':4},{'team':'用户3','teamId':'14','teamParentId':'1','2019-01':20,'2019-02':30,'2019-03':36},{'team':'班组2','teamId':'2','teamParentId':'','2019-01':66,'2019-02':77,'2019-03':88},{'team':'用户4','teamId':'21','teamParentId':'2','2019-01':11,'2019-02':2,'2019-03':33},{'team':'班组3','teamId':'3','teamParentId':'','2019-01':88,'2019-02':55,'2019-03':100},
]

二、表格的初始化渲染和二级数据行的隐藏：

1、因为静态数据渲染不会触发onLoadSuccess方法，所以此处用onPostBody代替（但onPostBody方法在每次调用bootstrap的隐藏显示方法后，均会被调用，暂时没有找到更改好的替代方案）。所以代码中为了避免一直循环赋值，用了parentRowClickFlag是否为空来处理。
2、渲染完成后，会提取出二级数据的index数组（用于渲染完成后的隐藏二级行）。和一级数据行是否展开过的标识数组。

let $table = $("#TableId");
let hideRowIndexs = [];// 需隐藏的行（即二级数据所在行）
let parentRowClickFlag = [];// 父级行是否展开过的标识数组
$table.bootstrapTable({data:data,columns:columns,striped:false,sidePagination:'client',onPostBody:function (data) {if (parentRowClickFlag.length == 0){for (let i = 0; i < data.length; i++) {if (data[i].teamParentId != ""){hideRowIndexs.push(data[i].index);} else {parentRowClickFlag.push({"teamId":data[i].teamId,"isShow":false});}}}}
})// 渲染完成后隐藏子级行
if (hideRowIndexs.length > 0){$.each(hideRowIndexs,function (i,index) {$table.bootstrapTable('hideRow', {index:index});// 隐藏行})
}

三、展开折叠行的箭头点击事件

1、通过控制行的显示隐藏来实现折叠展开，并同时设置箭头的方向。

/*** 展开折叠点击方法* @param teamId:该行数据的id*/
treeGridClick = function(teamId){// 获取该行是否点击过状态let currentRow = {};$.each(parentRowClickFlag,function (i,row) {if (teamId == row.teamId){currentRow = row;return false;}})// 控制行的显示隐藏来模拟展开折叠if (!currentRow['isShow']){// 开$.each(data,function (i,da) {if (teamId == da.teamParentId){$table.bootstrapTable('showRow', {index:da.index});}})currentRow['isShow'] = true;} else {// 合$.each(data,function (i,da) {if (teamId == da.teamParentId){$table.bootstrapTable('hideRow', {index:da.index});}})currentRow['isShow'] = false;}// 统一改变展开折叠的箭头样式$.each(parentRowClickFlag,function (i,row) {if (row.isClick){$("#" + row.teamId).html("");} else {$("#" + row.teamId).html("");}})
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！