ExtJS Grid Panel单元格合并：如何修改前一行metaData设置rowspan？

你的思路核心问题在于单元格渲染器（renderer）是逐单元格执行的，当处理当前行时，前一行的DOM已经渲染完成，无法回溯修改其metaData（metaData仅对当前正在渲染的单元格生效）。要实现连续重复单元格合并，需要提前预处理数据，计算好每组重复项的rowspan，再在渲染时应用。

步骤1：预处理Store数据，计算连续重复项的rowspan #

在Store加载完成后，遍历数据为每个记录添加自定义字段，标记是否为重复行以及组首行的合并行数：

// 假设你的Store实例为gridStore
gridStore.on('load', function(store) {
    var records = store.getRange();
    if (records.length === 0) return;

    var prevValue = records[0].get('你的第一列dataIndex');
    var currentRowspan = 1;

    // 从第二行开始遍历
    for (var i = 1; i < records.length; i++) {
        var currValue = records[i].get('你的第一列dataIndex');
        if (currValue === prevValue) {
            currentRowspan++;
            // 标记当前行为重复行
            records[i].set('isDuplicate', true);
        } else {
            // 给上一组的首行设置rowspan
            records[i - currentRowspan].set('rowspan', currentRowspan);
            prevValue = currValue;
            currentRowspan = 1;
        }
    }
    // 处理最后一组
    records[records.length - currentRowspan].set('rowspan', currentRowspan);
});

步骤2：修改Renderer逻辑，应用rowspan和隐藏重复单元格 #

更新你的列渲染器，根据预处理的字段设置单元格属性：

renderer: function(value, metaData, record, row, col, store, gridView) {
    var dataIndex = metaData.column.dataIndex;
    // 仅处理第一列
    if (col === 0) {
        if (record.get('isDuplicate')) {
            // 隐藏重复行的单元格
            metaData.tdAttr = 'style="display:none;"';
            return '';
        } else {
            // 给组首行设置rowspan
            var rowspan = record.get('rowspan') || 1;
            metaData.tdAttr = 'rowspan="' + rowspan + '"';
            return value;
        }
    }
    // 其他列正常返回值
    return value;
}

注意事项 #

• 若使用了自定义Model，需在Model中提前声明rowspan和isDuplicate字段；若未使用Model，ExtJS记录默认支持动态添加字段。
• 如果Store数据会动态更新（新增、删除、编辑），需在数据变更后重新执行预处理逻辑（可监听Store的add、update、remove事件）。

内容的提问来源于stack exchange，提问作者Steve W