显示 ag-grid 中列的总和

Question

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

下面是我的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}
];

}

我的输出如下

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

请帮我解决这个问题。

Answer 1

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

设置[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>

显示 ag-grid 中列的总和

Show sum of a column in ag-grid

javascript

ag-grid

angular

ag-grid-angular

Live Demo