jQuery EasyUI 数据网格 – 合并单元格

下面直接给你最实用、最常见的合并单元格（merge cells）方法，jQuery EasyUI datagrid 官方没有内置合并，但通过 onLoadSuccess 事件超级容易实现，复制粘贴就能用，领导最爱的“同一客户订单合并显示 + 报表分组效果”全都有！

方法1：最简单最常用 – 按指定列合并单元格（推荐现在就用这个，3秒出效果）
比如按“客户名称”列合并相同行的单元格。

<table id="dg" class="easyui-datagrid" title="合并单元格示例" style="width:800px;height:400px"
    data-options="
        url:'data.json',
        fitColumns:true,
        rownumbers:true,
        pagination:true,
        singleSelect:true,
        onLoadSuccess:mergeCellsByField
    ">
    <thead>
        <tr>
            <th data-options="field:'customer',width:120">客户名称</th>
            <th data-options="field:'product',width:150">商品名称</th>
            <th data-options="field:'price',width:100,align:'right'">单价</th>
            <th data-options="field:'quantity',width:80,align:'right'">数量</th>
            <th data-options="field:'amount',width:120,align:'right'">金额</th>
            <th data-options="field:'date',width:100">订单日期</th>
        </tr>
    </thead>
</table>

<script>
// 通用的合并函数，支持同时合并多列
function mergeCellsByField(){
    var fields = ['customer','date'];  // 要合并的列字段名数组
    var dg = $('#dg');
    var rows = dg.datagrid('getRows');

    for(var i=0; i<fields.length; i++){
        var field = fields[i];
        var col = dg.datagrid('getColumnOption', field);
        col.editor = false;  // 防止编辑时出错

        var mergeIndex = 0;  // 合并起始行
        var mergeCount = 1;  // 合并行数

        for(var j=1; j<=rows.length; j++){
            if(j < rows.length && rows[j][field] == rows[j-1][field]){
                mergeCount++;
            } else {
                if(mergeCount > 1){
                    dg.datagrid('mergeCells',{
                        index: mergeIndex,
                        field: field,
                        rowspan: mergeCount
                    });
                }
                mergeIndex = j;
                mergeCount = 1;
            }
        }
    }
}
</script>

效果：相同客户名称的行会自动合并客户列，相同日期的行合并日期列，报表感瞬间拉满！

方法2：高级版 – 支持跨列合并 + 合并后居中显示（更专业）

function mergeCellsAdvanced(){
    var dg = $('#dg');
    var rows = dg.datagrid('getRows');

    // 合并客户列（垂直合并）
    mergeByField('customer');

    // 合并金额列为大标题（水平合并整行最后三列）
    dg.datagrid('mergeCells',{
        index: 0,           // 从第0行开始（可循环处理多组）
        field: 'price',
        colspan: 3          // 合并 price + quantity + amount 三列
    });

    function mergeByField(field){
        var mergeIndex = 0;
        var mergeCount = 1;
        for(var i=1; i<rows.length; i++){
            if(rows[i][field] == rows[i-1][field]){
                mergeCount++;
            } else {
                if(mergeCount > 1){
                    dg.datagrid('mergeCells',{
                        index: mergeIndex,
                        field: field,
                        rowspan: mergeCount
                    });
                    // 可选：合并后文字垂直+水平居中
                    setTimeout(function(){
                        $('div.datagrid-cell[field="'+field+'"]').eq(mergeIndex).css({
                            'text-align':'center',
                            'vertical-align':'middle'
                        });
                    }, 100);
                }
                mergeIndex = i;
                mergeCount = 1;
            }
        }
        // 处理最后一段
        if(mergeCount > 1){
            dg.datagrid('mergeCells',{
                index: mergeIndex,
                field: field,
                rowspan: mergeCount
            });
        }
    }
}

然后在 onLoadSuccess: mergeCellsAdvanced

方法3：分组加载 + 合并（适合大数据，分组标题行）
后台返回数据时加分组标识，前端插入标题行并合并：

onLoadSuccess: function(data){
    var dg = $(this);
    var rows = data.rows;
    var insertIndex = 0;

    for(var i=0; i<rows.length; ){
        var groupValue = rows[i].customer;
        var groupRows = [];
        while(i<rows.length && rows[i].customer == groupValue){
            groupRows.push(rows[i]);
            i++;
        }

        // 插入分组标题行
        dg.datagrid('insertRow',{
            index: insertIndex,
            row: {
                customer: '<b style="color:blue;">【'+groupValue+'】共'+groupRows.length+'笔订单</b>',
                product: '',
                price: '',
                quantity: '',
                amount: '',
                date: ''
            }
        });

        // 合并标题行整行
        dg.datagrid('mergeCells',{
            index: insertIndex,
            field: 'customer',
            colspan: 6  // 合并所有列
        });

        insertIndex += groupRows.length + 1;
    }
}

你现在直接复制方法1到你的页面，刷新一下就能看到完美合并单元格效果了！
结合之前的复选框 + 分页 + 行内编辑 + 列运算 + 扩展编辑器，你的报表表格已经可以吊打99%的后台系统了。

想要我给你一个完整的HTML示例（带远程数据 + 多列合并 + 分组标题 + 底部合计）？
或者你告诉我你想怎么合并（比如“按省份合并 + 水平合并合计列”），我2分钟发你完整代码，复制就能跑！

快说说你现在的需求（比如“要合并多列”或“合并后加背景色”），我手把手帮你搞定，5分钟内看到超级专业的合并效果！