如何在Angular Infragistics UI表格分组模式下计算各分组的price字段总值

实现步骤 #

第一步：修改TS组件代码 #

首先导入摘要计算所需的依赖，自定义价格分组汇总类，再在组件中注册该类即可：

// 新增导入
import { IgxSummaryOperand, ISummaryResult } from 'igniteui-angular';

// 自定义价格总和汇总类
class PriceTotalSummary extends IgxSummaryOperand {
  override operate(data: any[] = []): ISummaryResult[] {
    // 累加当前分组所有price值，自动过滤无效值
    const total = data.reduce((sum, current) => sum + (Number(current) || 0), 0);
    return [
      {
        key: 'priceTotal',
        label: '分组总价',
        summaryResult: total
      }
    ];
  }
}

export class FactureComponent implements OnInit {
  // 注册自定义汇总类给模板调用
  public priceTotalSummary = PriceTotalSummary;
  public expr: ISortingExpression[];

  @ViewChild("grid") public grid!: IgxGridComponent;

  constructor(private rest: RestService,private toastr: ToastrService,private excelExportService: IgxExcelExporterService) 
  {
    this.expr = [
      { dir: SortingDirection.Asc, fieldName: 'client', ignoreCase: false,
        strategy: DefaultSortingStrategy.instance() },
      ];
  }
}

第二步：修改HTML模板代码 #

给price列绑定自定义汇总类即可，也可以按需调整汇总的显示位置：

<igx-grid #grid id="grid" [data]="listeinvoices" [groupingExpressions]='expr' [allowFiltering]="true"  [autoGenerate]="false" height="500px"
  <!-- 可选配置：汇总显示在分组顶部，默认是底部 -->
  [groupSummaryPosition]="'top'">

  <igx-column  field="client" header="client" [groupable]="true"></igx-column>
  <!-- 新增绑定summaries属性 -->
  <igx-column  field="price" header="price" [groupable]="true" [summaries]="priceTotalSummary"></igx-column>

  <igx-column  field="invoicenumber" header="invoice nb" [groupable]="true"></igx-column>
</igx-grid>

效果说明 #

• 每个client分组会自动统计当前分组内所有条目的price字段总和，和需求预期完全一致
• 表格筛选、数据增删修改后会自动重新计算汇总值
• 分组规则调整后汇总逻辑会自动适配新的分组维度

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