在 ag-grid 中显示列的总和

Question

我正在为我的桌子使用 ag-grid。 我需要在表格末尾显示每列的总和。 编辑单元格后，总和值应更新

下面是我的 html：

<div>
  <ag-grid-angular style="width: 100%; height: 500px;" class="ag-theme-alpine" [rowData]= "rowData"
    [columnDefs]= "columnDefs" >
  </ag-grid-angular>
</div>

下面是Typescript

import { Component } from '@angular/core';
import { GridRes } from './gridres.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ag-custom';


  columnDefs = [
    {headerName: "Make", field: "make"},
    {headerName: "Model", field: "model"},
    {headerName: "Price", field: "price"}
];

rowData = [
  {make: "Toyota", model: "Celica", price: 35000},
  {make: "Ford", model: "Mondeo", price: 32000},
  {make: "Porsche", model: "Boxter", price: 72000}
];

}

我的 Output 如下所示

我需要在表格末尾显示价格列的总和。 我去了显示聚合器功能。 但所有都显示在右侧作为分组。 但我需要显示在表格的底部。 总和需要反映是否有人编辑单元格

请帮助我。

Answer 1

以下是添加表格页脚以显示列总和的方法：

• 设置[groupIncludeTotalFooter]="true" 。
• 将aggFunc属性添加到要计算总和值的列。
• 将valueParser: 'Number(newValue)'添加到columnDefs以将更新的值解析为数字，以便在编辑后正确计算总和值。

columnDefs = [
  { field: "make" },
  { field: "model" },
  {
    field: "price",
    aggFunc: "sum",
    editable: true,
    valueParser: "Number(newValue)",
  }
];

<ag-grid-angular style="width: 100%; height: 600px;" class="ag-theme-alpine" [rowData]="rowData"
  [columnDefs]="columnDefs" [groupIncludeTotalFooter]="true">
</ag-grid-angular>

现场演示