如何在 AgGrid 中获取组数

Question

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

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

Answer 1

不幸的是，ag-grid API 没有提供任何方法来让您计算组内的行组数。然而，这可以很容易地使用 Vanilla JavaScript 计算，使用 JavaScript 的 Set。首先，我们从网格本身获取行节点数据，然后构造一个包含该特定属性的 Set（在此示例中，我们假设行组属性为“国家”）。由于我们只能为 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 供您参考。这应该会推动您朝着正确的方向前进。