Layui复杂表——表头合并和⾏合并加油，新时代打⼯⼈！
表头合并和⾏合并
⼀、表头效果
实现
其中 rowspan :2⾏跨度为2⾏
colspan：3 为合并3个字段
不是合并的字段都加上 rowspan :2
//第⼆⾏显⽰的字段
tableData = der({
elem:'#requestmapTable'
, url:getServerPath()+'noise_indicators/list'
, autoSort:false
, where: dataWhere
, cols:[[
{title:"序号", type:"numbers", rowspan:2},
{field:"TEST_TYPE_MC", title:"检测类别", width:"110", rowspan:2},
{field:"ISINNER", title:"监测⽅式", width:"110", rowspan:2},
{field:"TEST_TIME", title:"监测时间", width:"110", rowspan:2},
{field:"DEPARTMENT_NAME", title:"所属单位", width:"200", rowspan:2},
{field:"TEST_POINT_MC", title:"监测点位", width:"200", rowspan:2},
{field:"RESULT3", title:"测定结果", width:"200", colspan:3,align:"center"},
[
{field:"STANDARD_UPPER_LIMIT", title:"Lmax", width:"100"},
{field:"STANDARD_LOWER_LIMIT", title:"Lmin", width:"100"},
{field:"TEST_METHOD", title:"Leq", width:"100"},
]
, height:getHeightToFit()
, page:true
, limit:20
});
⼆、⾏合并效果
实现
//调⽤⾏合并放到⽣成表der的⾥⾯
done:function(res, curr, count){
merge(res);
}
//实现⾏合并
function merge(res){
var data = res.data;
var mergeIndex =0;//定位需要添加合并属性的⾏数
var mark =1;//这⾥涉及到简单的运算，mark是计算每次需要合并的格⼦数
var columsName =['id','name'];//需要合并的列名称
var columsIndex =[0,1];//需要合并的列索引值
for(var k =0; k < columsName.length; k++){//这⾥循环所有要合并的列
var trArr =$(".layui-table-body>.layui-table").find("tr");//所有⾏
for(var i =1; i < res.data.length; i++){//这⾥循环表格当前的数据
var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前⾏的当前列
var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第⼀列
if(data[i][columsName[k]]=== data[i-1][columsName[k]]){//后⼀⾏的值与前⼀⾏的值做⽐较，相同就需要合并                mark +=1;
layui下载tdPreArr.each(function(){//相同列的第⼀列增加rowspan属性
$(this).attr("rowspan", mark);
});
tdCurArr.each(function(){//当前⾏隐藏
$(this).css("display","none");
});
}else{
mergeIndex = i;
mark =1;//⼀旦前后两⾏的值不⼀样了，那么需要合并的格⼦数mark就需要重新计算
}
}
mergeIndex =0;
mark =1;
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。