layui多表头
layui多表头
主要是colspan跨几列与rowspan跨几行
cols: [
[ //表头
{type: 'numbers', width: '3%', rowspan: '2', fixed: 'left'},
{field: 'cname', title: '市', align: 'center', width: '100', rowspan: '2', fixed: 'left'},
{field: 'dname', title: '县', align: 'center', width: '100', rowspan: '2', fixed: 'left'},
{field: 'ennm', title: '水库名称', align: 'center', width: '100', rowspan: '2', fixed: 'left'},
{fied: '', title: '行政责任人', align: 'center', colspan: '4',},
{fied: '', title: '技术责任人', align: 'center', colspan: '4',},
{fied: '', title: '巡查责任人', align: 'center', colspan: '4',},
{
field: 'tool',
title: '操作',
align: 'left',
toolbar: '#skTool',
width: '120',
fixed: 'right',
minWidth: 120,
rowspan: '2',
fixed: 'right'
}
], [
{
fied: 'personName', title: '姓名', align: 'center', templet: function (d) {
var personName = "";
$.each(d.skZrrInfoList, function (index, item) {
if (item.personType == "0") {
personName += item.personName + "<br/>";
}
})
return "<div>" + personName + "</div>"
}
},
{
fied: 'personTitle', title: '单位', align: 'center', minWidth: 100, templet: function (d) {
var personTitle = "";
$.each(d.skZrrInfoList, function (index, item) {
if (item.personType == "0") {
personTitle += item.personTitle + "<br/>";
}
})
return "<div>" + personTitle + "</div>"
}
},
{
fied: 'personUnit', title: '职务', align: 'center', minWidth: 100, templet: function (d) {
var personUnit = "";
$.each(d.skZrrInfoList, function (index, item) {
if (item.personType == "0") {
personUnit += item.personUnit + "<br/>";
}
})
return "<div>" + personUnit + "</div>"
}
},
{
fied: 'personName', title: '联系电话', align: 'center', minWidth: 120, templet: function (d) {
var personTelephone = "";
$.each(d.skZrrInfoList, function (index, item) {
if (item.personType == "0") {
personTelephone += item.personTelephone + "<br/>";
}
})
return "<div>" + personTelephone + "</div>"
}
},
{
fied: 'personName', title: '姓名', align: 'center', templet: function (d) {
var personName = "";
$.each(d.skZrrInfoList, function (index, item) {
if (item.personType == "1") {
personName += item.personName + "<br/>";
}
})
return "<div>" + personName + "</div>"
}
},
{
fied: 'personTitle', title: '单位', align: 'center', minWidth: 100, templet: function (d) {
var personTitle = "";
$.each(d.skZrrInfoList, function (index, item) {
if (item.personType == "1") {
personTitle += item.personTitle + "<br/>";
}
})
return "<div>" + personTitle + "</div>"
}
},
{
fied: 'personUnit', title: '职务', align: 'center', minWidth: 100, templet: function (d) {
var personUnit = "";
$.each(d.skZrrInfoList, function (index, item) {
if (item.personType == "1") {
personUnit += item.personUnit + "<br/>";
}
})
return "<div>" + personUnit + "</div>"
}
},
{
fied: 'personTelephone', title: '联系电话', align: 'center', minWidth: 120, templet: function (d) {
var personTelephone = "";
$.each(d.skZrrInfoList, function (index, item) {
if (item.personType == "1") {
personTelephone += item.personTelephone + "<br/>";
}
})
return "<div>" + personTelephone + "</div>"
}
},
{
fied: 'personName', title: '姓名', align: 'center', templet: function (d) {
var personName = "";
$.each(d.skZrrInfoList, function (index, item) {
if (item.personType == "2") {
personName += item.personName + "<br/>";
}
})
return "<div>" + personName + "</div>"
}
},
{
fied: 'personTitle', title: '单位', align: 'center', minWidth: 100, templet: function (d) {
var personTitle = "";
$.each(d.skZrrInfoList, function (index, item) {
if (item.personType == "2") {
personTitle += item.personTitle + "<br/>";
}
})
return "<div>" + personTitle + "</div>"
}
},
{
fied: 'personUnit', title: '职务', align: 'center', minWidth: 100, templet: function (d) {
var personUnit = "";
$.each(d.skZrrInfoList, function (index, item) {
if (item.personType == "2") {
personUnit += item.personUnit + "<br/>";
}
})
return "<div>" + personUnit + "</div>"
}
},
{
fied: 'personTelephone', title: '联系电话', align: 'center', minWidth: 120, templet: function (d) {
var personTelephone = "";
$.each(d.skZrrInfoList, function (index, item) {
if (item.personType == "2") {
personTelephone += item.personTelephone + "<br/>";
}
})
return "<div>" + personTelephone + "</div>"
}
}
]
]
作者: JaminYe
版权声明:本文原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。