layer单元格合并

layer单元格合并

标签（空格分隔）： layer

layer数据表格

function tableList()
    {
        table.render({
            elem: '#file_table',
            id: 'idTest',
            url: "{:U('Baobiao/decorationReport')}", //数据接口
            method: 'post',
            where: {
                start_time: $("#start_time").val(),
                end_time: $("#end_time").val(),
                department_ids: (layui.formSelects.value('selectId', 'valStr')),
                house: $("#house").val(),
            },
            page: {
                limit: 20,//默认每页几条
                groups: 10,//连续显示几页
                layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],//分页位置
                first: "首页",
                last: "尾页",
                theme: "#0085ff"
            },
            cols: [[ //表头
                {
                    field: 'number',
                    title: '交易编号',
                    event: 'numberEvent',
                    style: 'color:#0085FF',
                    width: 150,
                }, {
                    field: 'transaction_username',
                    title: '成交人',
                    width: 100,
                }, {
                    field: 'department_username',
                    title: '成交部门',
                    width: 130,
                }, {
                    field: 'customer_name',
                    title: '成交客户',
                    width: 130,
                }, {
                    field: 'customer_number',
                    title: '客源编号',
                    event: 'customerEvent',
                    style: 'color:#0085FF',
                    width: 150,
                }, {
                    field: 'house_address',
                    title: '房屋地址',
                    width: 100,
                },{
                    field: 'measure_at',
                    title: '量房时间',
                    width: 100,
                }, {
                    field: 'approval_at',
                    title: '成交时间',
                    width: 100,
                }, {
                    field: 'total_commission',
                    title: '总佣金(元)',
                    width: 100,
                }, {
                    field: 'username',
                    title: '经纪人',
                    width: 100,
                }, {
                    field: 'commission_ratio',
                    title: '分成比例(%)',
                    width: 100,
                }, {
                    field: 'commission_money',
                    title: '分成业绩(元)',
                    width: 130,
                }, {
                    field: 'accrual_money',
                    title: '计提业绩(元)',
                    width: 130,
                }, {
                    field: 'commission_type',
                    title: '分成缘由',
                    width: 123,
                }
            ]],
            done : function(res, curr, count) {
                merge(res);
            }
        });
    }

    

// 合并单元格
function merge(res)
{
    var data = res.data;
    var mergeIndex = 0;//定位需要添加合并属性的行数
    var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
    
    var columsName = [
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        ''
    ];
    var columsIndex = [0,1,2,3,4,5,6,7,8,9];//需要合并的列索引值
    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]['number'] === data[i-1]['number']) { //后一行的值与前一行的值做比较，相同就需要合并
                mark += 1;
                //相同列的第一列增加rowspan属性
                tdPreArr.each(function () {
                    $(this).attr("rowspan", mark);
                });
                //当前行隐藏
                tdCurArr.each(function () {
                    $(this).css("display", "none");
                });
            }else {
                mergeIndex = i;
                mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
            }
        }
        mergeIndex = 0;
        mark = 1;
    }
}