[英]Show sum of a column in ag-grid
I am using ag-grid for my table.我正在为我的桌子使用 ag-grid。 I need to show the sum of each column at the end of the table.我需要在表格末尾显示每列的总和。 After editing the cell, the sum value should be updated编辑单元格后,总和值应更新
Below is my html:下面是我的 html:
<div>
<ag-grid-angular style="width: 100%; height: 500px;" class="ag-theme-alpine" [rowData]= "rowData"
[columnDefs]= "columnDefs" >
</ag-grid-angular>
</div>
Below is Typescript下面是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}
];
}
My Output is like below我的 Output 如下所示
I need to show the sum of price column at the end of the table.我需要在表格末尾显示价格列的总和。 I gone show aggregator functions.我去了显示聚合器功能。 But all are showing in the right side as grouping.但所有都显示在右侧作为分组。 But I need to show in the bottom of the table.但我需要显示在表格的底部。 The sum need to reflect if someone edits the cells总和需要反映是否有人编辑单元格
Please help me on this.请帮助我。
Here is how you can add a table footer to show the sum of a column:以下是添加表格页脚以显示列总和的方法:
[groupIncludeTotalFooter]="true"
.设置[groupIncludeTotalFooter]="true"
。aggFunc
property to the column you want to compute the sum value.将aggFunc
属性添加到要计算总和值的列。valueParser: 'Number(newValue)'
to the columnDefs
to parse the updated value as number to calculate the sum value correctly after an edit.将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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.