可以使用 AG-Grid 自带的聚合函数实现。
具体实现方法为,首先在列定义中设置聚合函数的类型和字段名:
colDef: {
field: 'columnName',
aggFunc: 'sum' // 可选值为 avg, max, min, sum 等
}
然后在使用 AG-Grid 自带的聚合函数时,可以将求多种聚合方式的值传递给 aggregationColumns
参数:
gridOptions: {
columnDefs: [{
field: 'columnName',
aggFunc: 'avg'
}, {
field: 'columnName',
aggFunc: 'max'
}, {
field: 'columnName',
aggFunc: 'min'
}, {
field: 'columnName',
aggFunc: 'sum'
}],
enableSorting: true,
enableFilter: true,
enableColResize: true,
rowGroupPanelShow: 'always',
pivotPanelShow: 'always',
enableRangeSelection: true,
enableCharts: true,
pagination: true,
paginationPageSize: 10,
rowSelection: 'multiple',
suppressRowClickSelection: true,
groupSelectsChildren: true,
aggregateOnlyChangedColumns: true,
aggregationColumns: ['columnName'] // 聚合的列
}
需要注意的是,在设置了多种聚合方式时,需要在使用聚合函数时传递 aggregationColumns
参数,否则只会显示其中一种聚合方式的结果。另外,如果要在 AG-Grid 中使用自定义的聚合函数,可以通过 gridOptions' 对象的
customAggregations` 属性进行配置。
示例代码如下:
// 定义聚合函数
const avgAggFunc = (params) => {
const sum = params.values.reduce((total, currentValue) => total + currentValue, 0);
const count = params.values.length;
return sum / count;
};
const minAggFunc = (params) => {
return Math.min(...params.values);
};
// 设置列定义
const columnDefs = [{
headerName: 'ID',
field: 'id',
width: 50,
rowGroup: true,
hide: true
}, {
headerName: 'Name',
field: 'name',
width: 180
}, {
headerName: 'Age',
field: 'age',
width: 80,
aggFunc: 'avg,min' // 使用 avg 和 min 聚合函数
}, {
headerName: 'Address',
field: 'address',
width: 250
}];
// 设置 GridOptions
const gridOptions = {
columnDefs: columnDefs,
rowData: rowData,
enableSorting: true,
enableFilter: true,
enableColResize: true,
rowGroupPanelShow: 'always',
pivotPanelShow: 'always',
enableRangeSelection: true,
enableCharts: true,
pagination: true,
paginationPageSize: 10,
rowSelection: 'multiple',
suppressRowClickSelection: true,
groupSelectsChildren: true,
aggregateOnlyChangedColumns: true,
aggregationColumns: ['age'], // 聚合的列
customAggregations: { // 自定义聚合函数
avg: avgAggFunc,
min