接口数据
实现效果图
, cols: [
[
{type: 'checkbox', fixed: 'left', rowspan: 2}
, {field: 'blno', title: '提单号', fixed: 'left', rowspan: 2}
, {field: '', title: '货柜集合', align: 'center', width: 170, colspan: 9,}
],
[
{field: '', title: '货柜号码', align: 'center', templet: function (d) {
var containerno = [];
if(d.ymL_Contaiers!==undefined) {
d.ymL_Contaiers.forEach(ele => {
containerno.push(ele.containerNo + '<br/>' + '<p></p>')
});
return containerno
}
}
},
{field: '', title: '尺寸', align: 'center', templet: function (d) {
var size = [];
if(d.ymL_Contaiers!==undefined) {
d.ymL_Contaiers.forEach(ele => {
size.push(ele.size + '<br/>' + '<p></p>')
// console.log(size)
});
return size;
}
}
},
]
]
css部分
.laytable-cell-1-1-8 p:not(:last-child) {
position: absolute;
border: 0.5px #E6E6E6 solid;
width: 100%;
left: 0%;
}
html部分(需要集合的form部分写在总form里)
此时注意!!
用fiexed:left会错位,需要在done里添上(解决fixed固定,而导致的th高度不一致):
, done: function (res, curr, count) {
// console.log(res)
//解决操作栏因为内容过多换行问题
$(".layui-table-main tr").each(function (index, val) {
$($(".layui-table-fixed-l .layui-table-body tbody tr")[index]).height($(val).height());
$($(".layui-table-fixed-r .layui-table-body tbody tr")[index]).height($(val).height());
});
//解决fixed固定,而导致的th高度不一致
$(".layui-table-header tr").each(function (index, val) {
$(".layui-table-fixed").each(function () {
$($(this).find(".layui-table-header thead th")[index]).height($(val).height());
});
});
$(".layui-table-header tr").each(function (index, val) {
$(".layui-table-fixed").each(function () {
$($(this).find(".layui-table-header thead tr")[index]).height($(val).height());
});
});
$(".layui-table-main tr").each(function (index, val) {
$(".layui-table-fixed").each(function () {
$($(this).find(".layui-table-body tbody tr")[index]).height($(val).height());
});
});
$(".layui-table-main tr").each(function (index, val) {
$(".layui-table-fixed").each(function () {
$($(this).find(".layui-table-body tbody th")[index]).height($(val).height());
});
});
}