我为rowgroup:true
中的一列设置了Aggrid
。
我想显示它创建的组数并将其显示在页脚中。 我怎样才能做到这一点?
答案 0 :(得分:1)
不幸的是,ag-grid API没有提供任何方法可以让您计算组中行组的数量。但是,使用Vanilla JavaScript和JavaScript的Set可以很容易地计算出这一点。首先,我们从网格本身获取行节点数据,然后构造一个由该特定属性组成的Set(在此示例中,假定行组属性为“国家/地区”)。由于我们只能向集合添加唯一值,因此可以确保集合的大小是行组数。
+1
然后,我们可以简单地通过实现pinned rows将计数添加到页脚中。您将必须为countCountries() {
const rowData = [];
const countrySet = new Set();
this.gridApi.forEachNode(node => rowData.push(node.data));
rowData.map(obj => {
if (obj) {
countrySet.add(obj.country);
}
});
console.log(countrySet.size);
return countrySet.size;
}
指定输入属性绑定,并为pinnedBottomRowData
指定事件绑定,以便仅在呈现数据之后才计算国家/地区计数。
firstDataRendered
在您的component.ts本身上,
<ag-grid-angular
#agGrid
style="width: 100%; height: 420px;"
id="myGrid"
class="ag-theme-balham"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[animateRows]="true"
[enableRangeSelection]="true"
[rowData]="rowData"
[pinnedBottomRowData]="pinnedBottomRowData"
(firstDataRendered)="onFirstDataRendered($event)"
(gridReady)="onGridReady($event)"
></ag-grid-angular>
我创建了一个demo供您参考。这应该向正确的方向轻推。