利用layui创建二级表头

(作者:杨东升,撰写时间:2019.5.17)
一般情况下,使用一级表头已经够用了,但是,如果我想在一级表头的内容再进行细化的时候,一级表头显然不够用了,如图所示:出现了重复的单价、合计,但这两个单价合计放的数据是不一样的,无法知道这是具体的哪个单价合计,如果在换成xx单价xx合计的话,又会影响表格的美观,那怎么解决呢
在这里插入图片描述

当然是使用二级表头啦,你看使用二级表头之后,想表达的内容是不是展现的一清二楚:
在这里插入图片描述

具体是怎么实现的呢,和一级表头写法差不多,就多了两个参数rowspan和colspan,rowspan纵向跨越的单元格数,colspan横跨的单元格数(设置了colspan不用设置field和width)

比如我这里的,rowspan: 2纵向跨两格、colspan: 2横向跨两格即占了两份,我这里四个colspan: 2,所以后面要加上对应的8个表格,它会按顺序分的;

和一级表头一样,声明变量、初始化table组件,剩下的区别在于表头的写法了

二级表头代码:
var layuiTable;
var daySellListdetail;//日销售明细表

$(function () {
    //加载&&初始化layui组件
    layui.use(['table'], function () {
        layuiTable = layui.table;
      //日销售明细表
      daySellListdetail = layuiTable.render({
          elem: '#DaySellListdetail',
          cols: [[
              { type: 'numbers', title: '序号', width: 60, align: 'center', rowspan: 2 },
              { field: '', title: '商品编码', align: 'center',rowspan: 2 },
              { field: '', title: '商品名称', align: 'center',rowspan: 2 },
              { field: '', title: '款号', align: 'center', rowspan: 2 },
              { field: '', title: '颜色', align: 'center', rowspan: 2 },
              { field: '', title: '折扣', align: 'center', rowspan: 2 },
              { title: '数量', align: 'center', colspan: 2 },
              { title: '吊牌', align: 'center', colspan: 2 },
              { title: '成本', align: 'center', colspan: 2 },
              { title: '库存报警', align: 'center', colspan: 2 },
          ], [{ field: '', title: '已销', align: 'center' },
              { field: '', title: '库存', align: 'center' },
              { field: '', title: '单价', align: 'center' },
              { field: '', title: '合计', align: 'center' },
              { field: '', title: '单价', align: 'center' },
              { field: '', title: '合计', align: 'center' },
              { field: '', title: '上限', align: 'center' },
              { field: '', title: '下限', align: 'center' }
        ]],
        data: [],
    });
});

});
注意!要在colspan之前的表头都加上rowspan,不能少加或不加,不然表格就会全乱,你就会很难受
在这里插入图片描述
如果你想在二级表头后面再加一级表头的话,别在二级表头内容下加,比如在“下限”后加“备注”,不然表格就会变成这样
在这里插入图片描述
所以正确的做法是在“库存报警”“已销”之间加“备注”(记得也加上rowspan),当然你想在“备注”后加二级表头的话也是同理,这样二级表头就做出来啦
在这里插入图片描述

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 黑客帝国 设计师:白松林 返回首页