Layui table 合并单元格

Layui table 合并单元格

合并单元格这里使用的是 done 回调方法，因为是先隐藏相同单元格然后给头行增加合并属性，所以逻辑是：

1. 循环所有行，每次进入都判断当前行的唯一值是否跟上一个相同
2. 如果唯一值相同则隐藏对应的单元格并加一合并行计数
3. 不同就先把之前的行进行合并，然后保存当前行的唯一值
4. 如果需要合并的单元格下有合计行，计算单元格的合计值
5. 如果是最后一次循环，进行处理行的合并，不然你会发现列表的最后一行没有合并
6. 记得把计算的合计值添加到合计行上

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){
	            //按需求前12列相同的单元格都要隐藏（根据你的需求修改）
	            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);
   }
});