最后，经过对页脚总行的大量研发，我发现我们可以实现PinnedBootomRow 来显示表格的总和。
所以我放弃了上述想法，因为它会在固定列上产生问题，而且管理 2 个表也很棘手。
感谢 AreYouSiries 在 plucker here987654321@
上提供了这么好的演示
也感谢 Ag-Grid 提供了这么好的文档 live examples
Total Row 我的自定义 Plucker 版本是 here
通过遵循上述示例，我能够实现我的确切要求，现在它按预期工作。
让我添加排序步骤以实现 ag-grid 中的总行功能：
第一步 - 生成固定总行：下面的函数将生成一个空的目标对象，其中所有列都在网格中可用。
generatePinnedBottomData(){
// generate a row-data with null values
let result = {};
this.gridColumnApi.getAllGridColumns().forEach(item => {
result[item.colId] = null;
});
return this.calculatePinnedBottomData(result);
}
第二步计算部分或全部列的总计：您需要根据行数据计算总计，并在上面生成的目标行中设置值。
calculatePinnedBottomData(target: any){
//console.log(target);
//**list of columns fo aggregation**
let columnsWithAggregation = ['age']
columnsWithAggregation.forEach(element => {
console.log('element', element);
this.gridApi.forEachNodeAfterFilter((rowNode: RowNode) => {
//if(rowNode.index < 10){
//console.log(rowNode);
//}
if (rowNode.data[element])
target[element] += Number(rowNode.data[element].toFixed(2));
});
if (target[element])
target[element] = `Age Sum: ${target[element].toFixed(2)}`;
})
//console.log(target);
return target;
}
第三步和最后一步： 调用上面的generatePinnedBottomData() 函数，您可以从 API 或本地数据库获取网格数据。在上面的例子中，我们曾经从onGridReady()调用
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
console.log(this.gridColumnApi.getAllGridColumns())
this.http
.get("https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinners.json")
.subscribe(data => {
this.rowData = data;
setTimeout(()=>{
let pinnedBottomData = this.generatePinnedBottomData();
this.gridApi.setPinnedBottomRowData([pinnedBottomData]);
}, 500)
});
}
您需要将生成的数据分配给网格。
就是这样，您现在可以看到您的总行固定在网格底部。
最终输出：
希望我的帖子能帮助你实现网格中的总行数。