layui數據表格固定頭部和第一列、colspan合並列

剛看到原型圖的時候，納尼？不是跟我開玩笑吧，小女子資歷尚淺，還真沒做過像這樣的功能，然后就是各種找度娘，可是都沒有找到合適的，很多都是行合並，真的是頭疼呀！再糾結是用VUE實現還是用layui實現好，在最后掙扎下，還是選擇了用layui。最后加上從各大神的demo中得到的靈感。在這里記錄一下，希望可以幫助到有需要的人啦~

移動端展示效果如下：

 

 

 

<script>

layui.use('table', function(){
var table = layui.table;
//第一個實例
table.render({
elem: '#demo'
,height:document.body.offsetHeight
,url: './workStatu.json' //數據接口
,cols: [[ //表頭
{field: 'name', title: '第13周', width:100,fixed: 'left',align:'center'}
,{field: 'vlcc', title: '周一(3月25日)', width:115,align:'center'}
,{field: 'suezmax', title: '周一(3月25日)', width:115,align:'center'}
,{field: 'aframax', title: '周一(3月25日)', width:115,align:'center'} 
,{field: 'panamax', title: '周一(3月25日)', width:119,align:'center'}
,{field: 'crudeoilmr', title: '周一(3月25日)', width:115,align:'center'}
]]
,done:function(res,curr,count){
colSpan()
}    
}); 
});



function colSpan(){
var tab = document.querySelector("div .layui-table-main .layui-table");//獲取目標tabel
var maxRow = 6, val, count, start;
count = 1;
val = "";
for(var i = 0;i<tab.rows.length;i++){ //遍歷所有行
for(var col = maxRow - 1; col >= 1; col--){ //遍歷每一行的每一個td
if(val == tab.rows[i].cells[col].innerText){ //判斷前一個td和后一個td是否相同
if(tab.rows[i].cells[col].innerText.length>=4){ //判斷td的值的長度是否大於4，因為這里的需求是長度大於4有相同的才合並
count++;
tab.rows[i].cells[col].colSpan = count;
for(var j = 1;j<count;j++){
tab.rows[i].cells[j+col].style.display = "none";//相鄰的有相同的值，第一個設置colspan，后面的隱藏
}
} 
}else{
if(count>1){
count = 1;
}
val = tab.rows[i].cells[col].innerText;
}    
}    
} 
}

</script>