如何在 AgGrid 中获取组数

Question

我已经为 Aggrid 中的其中一列设置了 rowgroup:true。

我想显示它创建的组数并将其显示在页脚中。我怎样才能做到这一点？

Answer 1

遗憾的是，ag-grid API 没有提供任何方法让您可以计算组内行组的数量。然而，这可以使用 Vanilla JavaScript 和 JavaScript 的 Set 轻松计算。首先，我们从网格本身获取行节点数据，然后构造一个由特定属性组成的集合（在本例中，我们假设行组属性是 'country' ).由于我们只能将唯一值添加到一个Set中，所以我们可以确定Set的大小就是行组数。

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;
}

然后，我们可以通过实现 pinned rows 简单地将计数添加到页脚。您必须为 pinnedBottomRowData 指定输入属性绑定，并为 firstDataRendered 指定事件绑定，以便仅在呈现数据后计算国家/地区计数。

 <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>

在你的 component.ts 本身，

onFirstDataRendered(event) {
  this.pinnedBottomRowData = this.createData();
}

createData() {
  const result = [];
  result.push({
    country:`count:${this.countCountries()}`,
  });
  return result;
}

我创建了一个demo供您参考。这应该会把你推向正确的方向。

如何在 AgGrid 中获取组数

How to Get Group count in AgGrid

ag-grid