Ag-Grid 主从表结构数据导出技术解析

背景概述

在Ag-Grid企业级数据表格组件中，主从表(Master-Detail)结构是一种常见的高级功能，它允许用户通过detailCellRendererParams参数展开子表格查看关联数据。但在实际业务场景中，用户往往需要将主表和展开的子表数据一并导出为Excel文件，这就涉及到复杂表格结构的导出处理。

核心实现方案

1. 主从表结构特点

主从表结构中，主表行通过点击展开按钮显示关联的子表数据。这种嵌套结构在DOM渲染上是分离的，但在业务数据上是关联的，这给数据导出带来了特殊挑战。

2. Excel导出配置关键点

2.1 基础导出配置

使用Ag-Grid提供的exportDataAsExcel API时，默认只会导出主表可见数据。要实现主从表同时导出，需要特别处理：

gridOptions.api.exportDataAsExcel({
  // 基础配置项
  sheetName: '业务数据',
  fileName: '主从表数据.xlsx'
});

2.2 主从表关联导出

通过配置exportParams中的自定义处理器实现：

const exportParams = {
  getCustomContentBelowRow: (params) => {
    if (params.node.detailNode) {
      // 获取子表数据
      const detailGridApi = params.node.detailGridInfo.api;
      return detailGridApi.getModel().rowsToDisplay.map(row => {
        return row.data;
      });
    }
    return null;
  }
};

3. 样式与格式控制

3.1 层级缩进

为使导出的Excel保持清晰的层级关系，建议对子表数据进行缩进处理：

getCustomContentBelowRow: (params) => {
  // ...
  return childRows.map(row => ({
    ...row.data,
    // 添加缩进标识
    '_agIndent': 2 
  }));
}

3.2 合并单元格

对于需要跨列显示的主表字段，可通过processCellCallback配置：

processCellCallback: (params) => {
  if (params.node.detailNode) {
    return { 
      style: { 
        fill: { patternType: 'solid', fgColor: { rgb: 'FFD3D3D3' } },
        indent: 2
      }
    };
  }
  return null;
}

高级技巧

1. 大数据量优化

当子表数据量较大时，建议：

• 使用chunkSize分块处理
• 启用webWorker避免UI阻塞
• 考虑服务端生成方案

2. 自定义样式模板

通过excelStyles配置预定义样式：

excelStyles: [
  {
    id: 'indent-2',
    alignment: { indent: 2 },
    interior: { color: '#F5F5F5', pattern: 'Solid' }
  }
]

3. 多Sheet导出

复杂场景可将主从表分别导出到不同Sheet：

const sheets = [
  { 
    name: '主表',
    data: gridApi.getDataAsExcel()
  },
  {
    name: '子表汇总',
    data: getAllDetailData()
  }
];

常见问题解决方案

1. 中文乱码问题

   • 确保设置properFormat: true
   • 添加BOM头字节

2. 性能优化

   • 对子表数据启用惰性加载
   • 使用shouldExportRow回调过滤非必要数据

3. 格式保持

   • 冻结首行确保标题可见
   • 设置自动列宽

最佳实践建议

1. 对于固定结构的子表，建议预先定义好Excel模板
2. 超过10万行数据考虑分文件导出
3. 生产环境建议添加导出进度提示
4. 重要数据导出应增加水印保护

通过合理配置Ag-Grid的导出API，结合业务需求进行定制化开发，完全可以实现专业级的主从表数据导出功能。关键在于理解数据层级关系，并善用回调函数进行精细化控制。