利用layui创建二级表头

一般情况下，使用一级表头已经够用了，但是，如果我想在一级表头的内容再进行细化的时候，一级表头显然不够用了，如图所示：出现了重复的单价、合计，但这两个单价合计放的数据是不一样的，无法知道这是具体的哪个单价合计，如果在换成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），当然你想在“备注”后加二级表头的话也是同理，这样二级表头就做出来啦

利用layui创建二级表头相关推荐

【Excel_006】利用数据验证创建二级关联下拉菜单
本篇博客介绍利用数据验证创建二级关联下拉菜单.可达到筛选器/切片器的效果数据源步骤先做大类验证. 选中源数据,Ctrl+G 调出定位窗口,选择[定位条件],选择[常量] 选择[公式]-[根据所选 ...
用layui创建表格
1.首先我们设置好页面布局,如下图所示然后我们就要利用jq和layui来创建的表单我们再看看jq的部分如阴影部分所示 1.首先我们要利用function给他创建一个点击事件,在最上面我们还给他定 ...
layui Table复杂表头导出
layui Table复杂表头导出网上找了一天都没找到合适的layui复杂表头的导出解决办法,试过Table2excel,然并卵. 最后还是在layui论坛里发现的了大佬给出了解决办法我的表头是这 ...
easyPoi二级表头，自定义合并行列方法
前言: 最近在做导出Excel相关的内容,就想到了easyPoi,因为它是采用注解的方式进行开发,我个人觉得非常好用,直接上代码. 下面是easyPoi工具类 import cn.afterturn. ...
利用JavaScript实现二级联动
利用JavaScript实现二级联动要实现JavaScript二级联动效果,首先要确定需要哪些技术: 二维数组 for in循环 new Option(text,value,true,true) a ...
利用Markdown创建表格
Markdown作为一种轻量级书写/写作语言,并没有提供很好的排版.编辑等功能.因此,如果想要利用Markdown创建表格(特别是复杂表格),其实是一项不太轻松的事情. 经过笔者在简书平台上的测试与其 ...
利用HTML创建个人简历
利用HTML创建个人简历 HTML表格的特点: 通常情况下,同行的高度一致,同列的宽度一致. 一.标签的学习 1.表格标签 table标签定义一个表格 tr标签定义表格的行声明一行,设置行高及改 ...
利用phoenix建立二级索引查询hbase，大神请无视
利用phoenix建立二级索引查询hbase phoenix的简单介绍 phoenix,中文译为"凤凰",很美的名字.Phoenix是由saleforce.com开源的一个项目,后 ...
Java归去来第2集：利用Eclipse创建Maven Web项目
一.前言如果还不了解剧情,请返回第一集的剧情 Java归去来第1集:手动给Eclipse配置Maven环境二.利用Eclipse创建Maven Web项目选择File-New- ...

利用layui创建二级表头

利用layui创建二级表头相关推荐

最新文章

热门文章