Layui复杂表头的两种方法

此方法用的是layui插件 插件可以搜索layui官网下载

自动渲染
一个简单的二级表头:

<table class="layui-table" lay-data="{width:800, url:'demo2.json?v=2', page: true, limit: 6, limits:[6]}"> <thead> <tr> <th lay-data="{checkbox:true, fixed:'left'}" rowspan="2"></th> <th lay-data="{field:'username', width:150}" rowspan="2">联系人</th> <th lay-data="{align:'center'}" colspan="3">地址</th> <th lay-data="{field:'amount', width:120}" rowspan="2">金额</th> <th lay-data="{fixed: 'right', width: 160, align: 'center', toolbar: '#barDemo'}" rowspan="2">操作</th> </tr> <tr> <th lay-data="{field:'province', width:120}">省</th> <th lay-data="{field:'city', width:120}">市</th> <th lay-data="{field:'zone', width:200}">区</th> </tr> </thead> </table>

实现此功能的主要是rowspan="2"和colspan="3"

rowspan="2":此列占两行 不写此属性默认一行

colspan="3":此列占三列不写此属性默认一行列

然后在用tr区分行一个tr为一行,

2.方法渲染一个二级表头

首先要在html写一个table标签并给ID subjectTable以供下文使用

table.render({                     elem: "#subjectTable",                     url: "/elseAffair/inventoryAdjust/inquireCommodity",                     text: {                         none: '使用流程:添加商品->保存单据->审核单据 数量为正(1),库存增加:数量为负(-1),库存减少'                     },                     cols: [[                         { type: "numbers", title: "序号", rowspan: 2, align: "center" },                         { field: "CommodityDetailID", title: "商品明细id", hide: true, rowspan: 2, align: "center" },                         { field: "CommodityCode", title: "商品编码(条码)", rowspan: 2, align: "center", width: 140 },                         { field: "CommodityName", title: "商品名称", rowspan: 2, align: "center", width: 140 },                         { field: "CommodityStyleNumber", title: "款号", rowspan: 2, align: "center" },                         { field: "ColorName", title: "颜色", rowspan: 2, align: "center" },                         { field: "SizeName", title: "尺码", rowspan: 2, align: "center" },                         { field: "TagPrice", title: "吊牌价", rowspan: 2, align: "center" },                         { field: "UnitName", title: "单位", rowspan: 2, align: "center" },                         { field: "", title: "数量金额", colspan: 2, align: "center", width: 140 },                         { field: "ADetailRemark", title: "备注", rowspan: 2, align: "center",edit:true },                     ], [                          { field: "Quantity", title: "数量", align: "center",edit:true },                         { templet: totalmoney, title: "合计金额", align: "center", width: 100 },                     ]],

部分效果截图:

和自动渲染没什么去别,一个用tr标签分行 一个用[]号分行