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;
    }
}