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 }, ]], |
