使 Angular2 中的 ag-Grid 分组更快答案

【问题标题】：Making ag-Grid grouping in Angular2 faster使 Angular2 中的 ag-Grid 分组更快
【发布时间】：2018-05-09 19:14:44
【问题描述】：

我正在考虑将 ag-Grid 用于我们的目的。我们需要将大量行（约 50,000 行）加载到 ag-Grid。此外，我们必须用 grouping 显示行（见附件截图）。然而，在添加带有分组属性的“ag-Grid”之后，网格加载非常非常慢，有时甚至堆叠。展开/折叠选项也很慢。

this.gridOptions = <GridOptions>{
  rowData:this.rowData,
  columnDefs:this.columnDefs,
  enableFilter: true,
  maxBlockInCache: 100,
  cacheOverflowSize:50,
  cacheBlockSize:50,
  enableRtl: true,
  enableColResize:true,
  suppressAutoSize:true,
  enableSorting:true,
  rowSelection: 'multiple',
  rowDeselection:true,
  enableStatusBar:true,
  alwaysShowStatusBar:true,
  enableRangeSelection:true,
  rowGroupPanelShow: "always",
  animateRows: true,
  groupDefaultExpanded: -1,
  autoGroupColumnDef: { field: "city" },
  columnTypes: this.columnTypes
};

您能否提供帮助或提出解决问题的任何想法？

【问题讨论】：

标签： angular ag-grid ag-grid-ng2

【解决方案1】：

如果你的应用中有分组，我猜你一定有 agggrid 企业。

在这种情况下，您应该使用企业或视口行模型。现在，每次必须进行更新（例如向下滚动一个像素）时，您都会渲染所有 50.000 行。

我们没有使用企业版，所以我只能链接你到官方文档：

但是当我们从标准行模型更改为无限滚动（具有企业的大部分功能）时，已经有 1000 行了。

我们还进行了其他优化，例如删除输入组件并用 aggrid-cell-editors 替换它们（整个列只有一个输入侦听器），但切换行模型是迄今为止最大的性能改进。

【讨论】：