Angular中Ag-Grid用groupRows分组时实现列聚合显示

步骤1：为目标列配置聚合函数 #

给每个需要展示聚合结果的列添加aggFunc属性，可使用Ag-Grid内置函数（如'sum'、'avg'、'count'），也可以自定义聚合逻辑：

columnDefs = [
  { field: 'country', rowGroup: true, hide: true },
  { field: 'year', rowGroup: true, hide: true },
  // 内置求和聚合
  { field: 'sales', aggFunc: 'sum' },
  // 自定义平均利润聚合
  { field: 'profit', aggFunc: (params) => {
    let total = 0;
    params.values.forEach(val => total += val);
    return (total / params.values.length).toFixed(2);
  }},
  // 其他列配置...
];

步骤2：自定义分组行单元格渲染器 #

创建一个Angular组件作为单元格渲染器，判断当前行是否为分组行，若是则以红色样式渲染聚合值：

import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';

@Component({
  template: `
    <span *ngIf="params.node.group" style="color: red; font-weight: bold;">{{ params.value }}</span>
    <span *ngIf="!params.node.group">{{ params.value }}</span>
  `
})
export class GroupAggRendererComponent implements ICellRendererAngularComp {
  params: any;

  agInit(params: any): void {
    this.params = params;
  }

  refresh(params: any): boolean {
    this.params = params;
    return true;
  }
}

在模块中声明该组件，并在Ag-Grid配置里注册：

import { GroupAggRendererComponent } from './group-agg-renderer.component';

// 组件内的Ag-Grid配置
frameworkComponents = {
  groupAggRenderer: GroupAggRendererComponent
};

最后在列定义中绑定该渲染器：

columnDefs = [
  // ...其他列
  { field: 'sales', aggFunc: 'sum', cellRenderer: 'groupAggRenderer' },
  { field: 'profit', aggFunc: customAggFunc, cellRenderer: 'groupAggRenderer' },
];

步骤3：确认分组基础配置 #

确保你的Grid配置已开启groupRows模式：

gridOptions = {
  groupDisplayType: 'groupRows',
  autoGroupColumnDef: {
    headerName: '分组',
    cellRendererParams: {
      suppressCount: true // 不需要默认分组计数可关闭
    }
  },
  // 其他配置...
};

完成以上配置后，分组行的对应列会以红色加粗样式展示该分组的聚合计算结果，匹配你需要的效果。

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