时间戳

首页 > 解决方案 > 在 ag-grid 中显示列的总和

javascript - 在 ag-grid 中显示列的总和

问题描述

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

下面是我的html：

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

下面是打字稿

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}
];

}

我的输出如下

在此处输入图像描述

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

请帮助我。

标签： javascriptangularag-gridag-grid-angular

解决方案

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

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

现场演示

推荐阅读