内容详情 您现在的位置是: 首页> Js

layui数据表格固定头部和第一列、colspan合并列

发布时间:2021-01-12 18:48 已围观:2919

摘要layui数据表格固定头部和第一列、colspan合并列

<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>

layui数据表格固定头部和第一列、colspan合并列


wew.png

layui官方文档地址:https://www.layui.com/demo/table/fixed.html

声明:本文内容摘自网络,版权归原作者所有。如有侵权,请联系处理,谢谢~
转发:https://www.cnblogs.com/zyfenblog/p/11098486.html

赞一个 (7)