Angular UI-Grid导出CSV时如何排除分组行仅导出原始数据行

当前导出逻辑混入分组行的核心原因：ui-grid导出服务默认拉取全量可见行时，会把分组功能自动生成的分组头、聚合统计行一并纳入导出范围，这些行不属于原始业务数据集合，不属于需要导出的内容。

具体改造逻辑 #

• 基于grid的行集合做预筛选，把所有分组模块自动生成的派生行过滤掉，仅保留绑定原始业务实体的真实数据行
• 将筛选后的行集合作为自定义数据源传给导出服务，替代导出服务默认拉取的全量行集合
• 其余列头获取、CSV格式化、文件下载的原有逻辑保持不变即可

改造后的完整代码 #

// 预筛选真实业务行，排除所有分组派生的聚合/分组头行
const validExportRows = grid.rows.filter(row => {
  const nodeType = row.treeNode?.$$type;
  // 过滤所有分组生成的分组头行、聚合统计行，仅保留真实业务行
  return nodeType !== 'group' && nodeType !== 'aggregation';
});

const exportColumnHeaders = exportService.getColumnHeaders(grid, uiGridExporterConstants.VISIBLE);
// 传入自定义筛选后的有效行集合，覆盖导出服务的默认全量行拉取逻辑
const exportData = exportService.getData(
  grid, 
  uiGridExporterConstants.ALL, 
  uiGridExporterConstants.VISIBLE, 
  validExportRows
);
const csvContent = exportService.formatAsCsv(
  exportColumnHeaders,
  exportData,
  grid.options.exporterCsvColumnSeparator
);
exportService.downloadFile(fileName, csvContent, grid.options.exporterOlderExcelCompatibility);

注意事项 #

• 该过滤逻辑兼容多级分组场景，所有层级的分组头、聚合统计行都会被排除，最终导出内容仅包含传入网格的原始业务数据行
• 改造不会影响网格上的分组展示、折叠展开、聚合统计等现有功能，仅作用于导出环节的数据筛选
• 如果使用的ui-grid版本较老，分组行的$$type标识存在差异，可以替换为更通用的判断逻辑：仅保留row.entity中存在业务数据自带标识字段的行（比如判断row.entity.id是否存在），同样可以精准过滤非业务行
• 若后续需要导出隐藏列、或所有列的内容，只需要调整getColumnHeaders和getData方法中控制可见范围的参数即可，行筛选逻辑无需改动

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