Angular-Slickgrid 如何获取表格列总和并传递给外部组件或变量

以下方案基于框架内置能力实现，兼顾性能和灵活性，可同时满足表格内置展示汇总值、对外同步求和结果的需求：

1. 配置目标列的求和汇总器 #

直接使用Angular-Slickgrid内置的求和汇总器，不需要手动遍历数据集计算：

import { Aggregators, Column, FieldType } from 'angular-slickgrid';

public columnDefinitions: Column[] = [
  // 其他列配置...
  {
    id: 'value',
    name: '数值列',
    field: 'value',
    type: FieldType.number,
    // 绑定内置求和汇总器
    aggregators: [Aggregators.sum],
    // 可选：配置列脚的汇总值展示格式，对应示例中的列脚总计效果
    groupTotalsFormatter: (totals) => `总计: ${totals.sum?.['value'] || 0}`,
  }
];

2. 开启网格汇总能力 #

在网格配置中开启汇总相关开关，不需要分组也可以实现全局列求和：

import { GridOption } from 'angular-slickgrid';

public gridOptions: GridOption = {
  // 开启列脚行，用于展示汇总值
  showFooterRow: true,
  // 配置全局汇总规则
  grouping: {
    // 不需要分组时隐藏分组标题行
    formatter: () => '',
    groupCollapsed: false,
    // 指定要计算求和的字段
    aggregators: [Aggregators.sum('value')],
  }
};

3. 监听汇总事件同步结果到外部 #

表格数据变更、汇总重算后会触发onGridStateChanged事件，你可以在回调中拿到最新的求和结果，同步给内部变量或者通过@Output传递给其他组件：

import { Component, Output, EventEmitter } from '@angular/core';
import { GridStateChange } from 'angular-slickgrid';

@Component({/* 组件配置省略 */})
export class SlickgridDemoComponent {
  // 对外传递求和结果的输出事件
  @Output() totalValueChanged = new EventEmitter<number>();
  // 内部存储的求和结果变量
  public totalValue = 0;

  // 网格状态变更回调
  handleGridStateChange(event: GridStateChange) {
    const groupTotals = event?.gridState?.grouping?.groupTotals;
    if (groupTotals?.length) {
      // 提取目标列的求和结果
      this.totalValue = groupTotals[0].sum?.['value'] || 0;
      // 传递给外部父组件
      this.totalValueChanged.emit(this.totalValue);
    }
  }
}

模板中绑定事件：

<angular-slickgrid
  gridId="demoGrid"
  [columnDefinitions]="columnDefinitions"
  [gridOptions]="gridOptions"
  [dataset]="yourDataset"
  (onGridStateChanged)="handleGridStateChange($event)"
></angular-slickgrid>

方案说明 #

• 所有计算逻辑基于框架内置能力实现，数据变更时会自动重算汇总值，不需要手动监听数据集遍历求和，性能更优
• 支持两种场景：当前页数据求和（前端分页）、全量数据求和（后端分页场景下同步后端返回的汇总值即可，逻辑一致）
• 求和结果既可以在表格列脚展示，也可以灵活同步到外部变量、父组件甚至全局状态管理中

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