我正在使用 Ag-Grid 表,我想在表的页脚中显示总行。我如何通过使用 2 个表来实现它,第 1 个表用于实际数据,第 2 个表用于总计行。
它在普通的不可滚动表格中工作正常,但如果它是固定或可滚动表格,则顶部表格会滚动,但底部表格会粘在同一位置。
我想以相同的偏移量同时滚动两个表格。
有关更多详细信息,请参阅下面的屏幕截图,其中我有总底表。
普通表:
您可以在普通表格中看到它完美地显示了总计。
在固定列表中,它未按预期工作。
查看两个表的滚动条。
我想并行滚动两个表格。
或者除了双表之外还有其他方式显示总计行吗?
请指导我。
最后,经过对页脚总计行的大量研发,我发现我们可以实现
PinnedBottomRow
来显示表格的总计。
所以我放弃了上述想法,因为它会造成固定列的问题,而且管理 2 个表也很棘手。
感谢AreYouSiries在plucker上提供了如此精彩的演示这里
也感谢Ag-Grid提供了如此好的文档和现场示例
我的 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)
});
}
您需要将生成的数据分配给网格。
现在您可以看到总行固定在网格底部。
希望我的帖子能帮助您实现网格中的总行数。
Ag-Grid 有一个内置选项来创建使用聚合函数(例如 sum、avg 等)的组页脚。 请参阅此处的详细信息: https://www.ag-grid.com/javascript-data-grid/grouping-footers/
以下是添加固定总计行的示例。希望它可以帮助任何正在寻找它的人。
const columnDefs = [
{ field: "make" },
{ field: "model" },
{ field: "price" }
];
// specify the data
const rowData = [
{ make: "Toyota", model: "Celica", price: 35000 },
{ make: "Ford", model: "Mondeo", price: 32000 },
{ make: "Porsche", model: "Boxster", price: 72000 }
];
const calcTotalCols = ['price'];
const totalRow = function(api) {
let result = [{}];
// initialize all total columns to zero
calcTotalCols.forEach(function (params){
result[0][params] = 0
});
// calculate all total columns
calcTotalCols.forEach(function (params){
rowData.forEach(function (line) {
result[0][params] += line[params];
});
});
api.setPinnedBottomRowData(result);
}
// let the grid know which columns and what data to use
const gridOptions = {
columnDefs: columnDefs,
rowData: rowData
};
// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', () => {
const gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
totalRow(gridOptions.api);
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ag-Grid Total Row Example</title>
<script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<div id="myGrid" style="height: 200px; width:500px;" class="ag-theme-alpine"></div>
</body>
</html>