layuitable处理奇葩后台数据实现复杂表头固定列功能
公司要求在⼿机上实现复杂表头表格，可以第⼀列固定，其他滑动的table功能，我看了下，在elementui中有这个功能，但是它的多级表头需要实现上下级的对象关系，⽽后台给我们返回的数据都是⽤colspan,rowspan渲染表头的，所以这个插件⽆法使⽤。
然后退⽽求其实，使⽤⽐较简单的layui中的table，因为它的ui做的还可以。
layui table 的复杂多级表头是⽀持表头使⽤rowspan和colspan 的。
但是要实现固定列功能，就必须让表头的filed关键字绑定数据的key，有些像jq table和bootstrap table，都是初始化表头，设置关键字，然后⾃动配上数据渲染table。
我是要实现这样的表格（只是模板，每个表头配置的都不同），复杂表头，第⼀列固定：
奇葩的是，后台在设计程序的时候，表头和数据是分开的，他的意思就是表头单独渲染，然后数据部分根据顺序写table就⾏了：
分别为： 数据，表头，表描述
数据就是普通的键值对数据；
表头就是按tr给的对象，每⼀⾏的内容⽂字，和对应的calspan,rowspan
表描述就是告你表的标题，和表格的数据顺序是按colModel的数据展⽰的
虽然他安排的明明⽩⽩，按表头和表body分别渲染确实⽆问题，但是我要使⽤layui table实现复杂表头和列固定，表头就必须和数据key绑定，⽽表头给出的乱七⼋糟的colspan,rowspan以后的，处理起来很⿇烦，要把它屡清楚很费脑细胞。
开始靠前端处理数据：
⾸先要搞清楚，colspan为1的⼀般都是需要绑定数据展⽰的，但数据中colspan为1的多⾏表头顺序并不能确定，所以⽆法按顺序为他们绑定key，此时，我想到了通过占位符，让每⼀⾏的总对象数都相同
先看看原始数据：
//循环表头数据
for(var i=0;i<headers.length;i++){
var array=[];
var header1=headers[i].colomnVos;
//console.log(header1)
//循环每列表头中的数据
for(var j=0;j<header1.length;j++){
var obj={}
//此时只是构造对象的雏形，还不能绑定field
obj={
title:header1[j].name,
rowspan:header1[j].rowspan,
colspan:header1[j].colspan,
style:{height:'auto'},
align:'center',
fake:false
}
array.push(obj)
//关键：如果colspan不为1的话，就在它后⾯加⼏个占位对象      if(header1[j].colspan!=1){
var thisColspan=header1[j].colspan;
for(var k=1;k<thisColspan;k++){
obj={
fake:true
}
array.push(obj)
}
}
}
tableCols.push(array);
}
//打印这个阶段的样⼦
var fuzhi=JSON.stringify(tableCols);
var fuzhi1=JSON.parse(fuzhi)
console.log(fuzhi1)
再看看处理后的数据：
此时发现，已经插⼊了占位对象了，但是每⼀⾏的对象总数还是不⼀样，这是因为有的表头rowspan并以⼀定为1
⽐如地市这⼀列直接跨了3⾏，那下⾯的即使把rowspan全部展开添加占位对象也会少⼀个对象，所以除了rowspan，还需要考虑colspan的问题。
现在可以确定的第⼀⾏的表头不管怎样，不需要考虑rowspan，将colspan全部展开必定代表表格的最⼤列数，那么我可以以最⼤列数开始纵向循环，如果上⼀级表头rowspan不是1，则在下⾯rowspan级表头这个位置也插⼊⼀个占位对象，描述很难，直接上代码：
//从第⼀个开始纵向循环,maxHeaderLength是表数据中获取的最⼤列数
for(var i=0;i<maxHeaderLength;i++){
for(var j=0;j<tableCols.length;j++){
var header1=tableCols[j];
if(!!header1[i]){
//此时，可以判断colspan为1的都有⾃⼰的数据，为其绑定field
if(header1[i].colspan==1){
if(i==0){
header1[i].field=pageConfVo[i];
header1[i].fixed='left'
}else{
header1[i].field=pageConfVo[i];
}
}
//关键：如果rowspan不为1，就在下⾯的表头中分别插⼊⼀个占位对象
if(header1[i].rowspan>1){
layui和bootstrap哪个好for(var k=0;k<header1[i].rowspan-1;k++){
tableCols[j+k+1].splice(i, 0, {fake:true});
}
}
}
}
}
var aaa=JSON.stringify(tableCols)
console.log(JSON.parse(aaa))
这时，再看下数据：
这就⼤功告成啦，可以保证每⼀⾏表头中，colspan为1所对应的列都是唯⼀的，所以就可以直接给他们赋值field的了。        赋值好后当然要把没⽤的占位对象删掉：
//最后
for(var i=0;i<tableCols.length;i++){
var header2=tableCols[i];
for(var j=0;j<header2.length;j++){
if(header2[j].fake){
header2.splice(j--,1);
}
}
}
console.log(tableCols)
最后的结果：

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