bootstraptable⼆级树形表格实现⽅法（⾮引⽤插件）
实际上，bootstrap或者layui的table都有对应的treegrid插件来实现表格数据的树形展⽰。但layui的treegrid插件似乎对复杂表头的⽀持不⼤好，⽽在我使⽤bootstrap的treegrid插件时⼀直出现样式问题（当然应该是我⾃⼰的问题）。于是，我准备⾃⼰代码实现⼀个⼆级树形表格。所以，此贴给本着学习的态度或者就是不想⽤插件的同学使⽤。
实现的效果如下：
当然，想学习这两个treegrid树形插件的同学，可以去官⽅⽂档学习，很ez。
友情链接1：
友情链接2：
不⽤插件的代码实现思路：利⽤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;
amStyle ==1){
return"<div><i class='layui-icon' οnclick='treeGridClick("+ amId +")' style='cursor:pointer' id='"+ amId +"'></i> "+ val ue +"</div>";
}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},layui和bootstrap哪个好
{'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 == amId){
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){
$("#"+ amId).html("");
}else{
$("#"+ amId).html("");
}
})
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。