Layui table 合并单元格
合并单元格这里使用的是 done 回调方法,因为是先隐藏相同单元格然后给头行增加合并属性,所以逻辑是:
- 循环所有行,每次进入都判断当前行的唯一值是否跟上一个相同
- 如果唯一值相同则隐藏对应的单元格并加一合并行计数
- 不同就先把之前的行进行合并,然后保存当前行的唯一值
- 如果需要合并的单元格下有合计行,计算单元格的合计值
- 如果是最后一次循环,进行处理行的合并,不然你会发现列表的最后一行没有合并
- 记得把计算的合计值添加到合计行上
ea.table.render({
init: init,
totalRow: true,
cols: [[
{field: 'warehouse_id',hide:true,search:'false'},
{type: 'checkbox'},
{field: 'warehouse.sort', title: '序号',width:70,totalRowText: '合计'},
{field: 'warehouse.serial_number', title: '流水号',width:120},
{field: 'warehouse.carNumber.title', title: '车号',width:100},
{field: 'warehouse.forward.title', title: '发货单位',minWidth:120},
{field: 'warehouse.consignee.title', title: '收货单位',width:80},
{field: 'warehouse.goods.title', title: '货品',width:80},
{field: 'warehouse.standards', title: '规格'},
{field: 'gross_weight', title: '毛重',width:100,totalRow: true},
{field: 'tare_weight', title: '皮重',width:100,totalRow: true},
{field: 'net_weight', title: '净重',width:100,totalRow: true},
{field: 'type',title: '类型',width:70,search: 'select',selectList: {'-1':'付款',0:'未知',1:'收款',2:'石料',3:'叉车',4:'运费',5:'返点'},templet:function (d) {
//0.未知 1.收款 2.石料 3.叉车 4.运费 5.返点
var arr = ['未知','收款','石料','叉车','运费','返点'];
var color = ['#707070','#00ee00','#00eedf','#eec500','#ee6a00','#EE00DB'];
return '<span style="color: ' + color[parseInt(d.type)] + '">' + arr[parseInt(d.type)] + '</span>';
}},
{field: 'title.title', title: '收付对象',minWidth:120,templet:function (d) {
return d.title ? d.title.title : '-';
}},
{field: 'number', title: '数量',width:70,search: 'false'},
{field: 'unit',title: '单位',width:70,search: 'false'},
{field: 'price',title: '单价',width:70,search: 'false'},
{field: 'payable_amount',title: '应收付金额',width:100,search: 'false',totalRow: true},
{field: 'amount_paid',title: '已收付金额',width:100,search: 'false',totalRow: true},
{field: 'pending_amount',title: '待收付金额',width:100,search: 'false',totalRow: true},
{width: 110, title: '操作',fixed:'right', templet: ea.table.tool},
]],
done: function(){
var mark = 1; //计算每次需要合并的格子数
var trArr = $(".layui-table-main>.layui-table").find("tr");//所有行
var current = ''; //上个处理的数据唯一值
var currentRow = ''; //上个处理的行
var totalRow = $(".layui-table-total>.layui-table").find("tr").eq(0).find('td'); //合计行
var gross_weight = 0; //毛重
var tare_weight = 0; //皮重
var net_weight = 0; //净重
trArr.each(function (i, v){
var is_same = current === trArr.eq(i).find('td').eq(3).find('div').find('span').text(); // 当前行是否与上个处理行相同
if (is_same){
//相同则隐藏列
for (var k = 0; k < 12; k++) {
trArr.eq(i).find('td').eq(k).css('display', 'none');
}
//计算合并行数
mark += 1;
}else{
// 合并上个处理行
if (current){
for (var j = 0; j < 12; j++) {
currentRow.eq(j).attr('rowspan', mark);
}
}
//保存当前行
currentRow = trArr.eq(i).find('td');
current = currentRow.eq(3).find('div').find('span').text();
mark = 1;
//计算合计行
gross_weight += trArr.eq(i).find('td').eq(9).text() * 1;
tare_weight += trArr.eq(i).find('td').eq(10).text() * 1;
net_weight += trArr.eq(i).find('td').eq(11).text() * 1;
}
// 循环结束处理合并
if (trArr.length - 1 === i){
for (var l = 0; l < 12; l++) {
currentRow.eq(l).attr('rowspan', mark);
}
}
})
// 计算合计
totalRow.eq(9).find('div').text(Math.round(gross_weight*100)/100);
totalRow.eq(10).find('div').text(Math.round(tare_weight*100)/100);
totalRow.eq(11).find('div').text(Math.round(net_weight*100)/100);
}
});