在 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>

現場演示