AG Grid连续重复单元格合并及动态列自动聚合技术问询

一、连续相同值单元格合并（含垂直居中） #

AG Grid 没有内置连续单元格合并功能，需通过计算行跨度（rowSpan） + 自定义渲染实现，同时配置样式完成垂直居中。

实现步骤 #

1. 预处理数据，计算rowSpan：遍历数据集，为每个需要合并的字段标记连续相同值的跨度。被合并的单元格设置rowSpan=0（隐藏），首单元格设置总跨度。
2. 列定义配置：通过getRowSpan回调返回跨度值，用cellRenderer控制内容显示，添加CSS类实现垂直居中。

代码示例 #

// 计算指定字段的连续行跨度
function calculateRowSpans(data, targetField) {
  let currentVal = null;
  let spanCount = 1;
  // 从后往前遍历，避免覆盖未处理的行数据
  for (let i = data.length - 1; i >= 0; i--) {
    const row = data[i];
    if (row[targetField] === currentVal) {
      spanCount++;
      row[`${targetField}RowSpan`] = 0;
    } else {
      currentVal = row[targetField];
      row[`${targetField}RowSpan`] = spanCount;
      spanCount = 1;
    }
  }
  return data;
}

// AG Grid 列定义
const columnDefs = [
  {
    headerName: '分类',
    field: 'category',
    // 返回预先计算的行跨度
    getRowSpan: params => params.data.categoryRowSpan,
    // 垂直居中样式类
    cellClass: 'cell-vertical-center',
    // 被合并的单元格不显示内容
    cellRenderer: params => params.data.categoryRowSpan > 0 ? params.value : ''
  },
  {
    headerName: '数值1',
    field: 'value1',
    cellClass: 'cell-vertical-center'
  }
];

// CSS 垂直居中样式
.cell-vertical-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

注意事项 #

• 确保数据集已按需要合并的字段排序，否则连续相同值可能不相邻，导致合并失效。
• 数据更新（如动态列切换后）需重新调用calculateRowSpans刷新跨度值。

二、动态列切换与自动重透视更新 #

结合你的Python后端聚合逻辑，前端通过触发后端重新计算透视数据，再更新AG Grid的列定义与行数据。

实现步骤 #

1. 列选择交互：用复选框组等组件让用户选择需要显示的列。
2. 请求后端重聚合：列选择变化时，携带选中列、日期范围（4.1-4.30）等参数请求后端。
3. 更新AG Grid：接收后端返回的新透视数据与列定义，重新设置到网格中，并重新计算单元格合并跨度。

代码示例 #

前端JS逻辑

// 列选择变化时触发
async function handleColumnChange(selectedColumns) {
  const dateRange = ['2024-04-01', '2024-04-30'];
  // 请求后端重新生成透视数据
  const res = await fetch('/api/get-pivot-data', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      columns: selectedColumns,
      startDate: dateRange[0],
      endDate: dateRange[1]
    })
  });
  const { rowData, columnDefs } = await res.json();
  
  // 重新计算合并字段的行跨度
  const processedData = calculateRowSpans(rowData, 'category');
  
  // 更新AG Grid
  gridApi.setColumnDefs(columnDefs);
  gridApi.setRowData(processedData);
}

后端Python示例（Flask）

from flask import Flask, request, jsonify
import pandas as pd

app = Flask(__name__)
# 假设测试数据已加载到data_df中
data_df = pd.read_csv('test_data.csv')

@app.route('/api/get-pivot-data', methods=['POST'])
def generate_pivot_data():
    params = request.get_json()
    selected_cols = params['columns']
    start_date = params['startDate']
    end_date = params['endDate']

    # 过滤日期范围
    filtered_df = data_df[(data_df['date'] >= start_date) & (data_df['date'] <= end_date)]
    
    # 生成透视表（按category分组，选中列求和）
    pivot_df = filtered_df.pivot_table(
        index='category',
        values=selected_cols,
        aggfunc='sum'
    ).reset_index()

    # 生成AG Grid兼容的列定义
    grid_columns = [
        {
            'headerName': '分类',
            'field': 'category',
            'getRowSpan': 'params.data.categoryRowSpan',
            'cellClass': 'cell-vertical-center'
        }
    ]
    for col in selected_cols:
        grid_columns.append({
            'headerName': col,
            'field': col,
            'cellClass': 'cell-vertical-center',
            'valueFormatter': 'params.value.toFixed(2)'
        })

    return jsonify({
        'rowData': pivot_df.to_dict('records'),
        'columnDefs': grid_columns
    })

if __name__ == '__main__':
    app.run()

注意事项 #

• 后端返回的列定义需与前端单元格合并逻辑兼容，确保合并字段的配置一致。
• 若前端之前合并效果失效，检查是否在数据更新后重新调用了calculateRowSpans方法。

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