layui的五级表头的拼接
在网上查找例子没有对应的三级以上的表头拼接;
在处理复杂表头时,colspan为1时,会出现空白列,解决办法是,修改 colspan 为 2,然后添加一列空白列 {title: ‘’, field:‘’, hide: true}
table.render({
elem: '#taizhangTable',
url: '/Ljxq/getgaizao',
method: 'POST',
//where: { 'bsc': bsc, 'year': year, '_type': _type, 'tender': tender },
toolbar: '#toolbarDemo',
defaultToolbar: ['filter'],
limit: 5,
totalRow: true,
parseData: function (res) {
//res 即为原始返回的数据
//for (var i = 0; i < res.data.length; i++) {
//}
// console.log(res);
return {
"code": 0, //解析接口状态
"msg": '', //解析提示文本
"count": res.count, //解析数据长度
"data": res.data //解析数据列表
};
},
cols: [
[
{
type: 'numbers', rowspan: 5, title: '序号', totalRowText: '合计' },
{
title: '办事处', field: 'town', rowspan: 5, },
{
title: '三年总和', field: '三年总和', rowspan: 5, totalRow: true, },
{
title: z19,
field: 'villagetype', colspan: 22, align: 'center',
},
{
title: z20,
field: 'villagetype', colspan: 22, align: 'center',
},
{
title: z21,
field: 'villagetype', colspan: 6, rowspan: 3, align: 'center',
},
],
//二级表头
[
{
title: sf19,
field: 'ksdate', colspan: 22, align: 'center',
//templet: function (d) { return '<cite>' + d.ksdate + '</cite>' }
},
{
title: sf20,
field: 'ksdate', colspan: 22, align: 'center',
},
],//三级表头
[
//2019
{
title: '小区总数', field: '小区总数one', rowspan: 3, align: 'center', totalRow: true },
{
title: jg19, colspan: 7, align: 'center' },
{
title: yg19, colspan: 7, align: 'center' },
{
title: wg19, colspan: 7, align: 'center' },
//2020
{
title: '小区总数', field: '小区总数two', rowspan: 3, align: 'center', totalRow: true },
{
title: jg20, colspan: 7, align: 'center' },
{
title: yg20, colspan: 7, align: 'center' },
{
title: wg20, colspan: 7, align: 'center' },
],
//四级表头
[
//2019竣工
{
title: jgs19, field