ag-grid-angular 行組樹數據渲染慢

Question

我正在使用樹數據使用Ag-grid-angular行分組。 我有大約一萬行或更多行的非常大的數據集。 我創建了一個drop-down其中有級別選項。 當我 select 級別時，所有網格組都會立即相應地expanded/collapsed 。 當我折疊或展開時，我遇到了速度緩慢和頁面凍結的問題。

展開/折疊方法：

expandGrid(level){
this.selectedOption = level.toString();
If(level === 1) {
this.gridapi.collapseAll();
} else {
this.gridApi.forEachNode((node) =>{
if (node.level <= level - 2) {
 node.setExpanded(true);}
else {
node.setExpanded(false);
}
});
}}

Answer 1

我有一個完整的解決方案，特別是對於那些擔心延遲和緩慢的人。

請參閱我在 Plnkr 上創建的這個示例。

基本上您可以使用以下代碼塊來展開和折疊網格上的樹數據：

首先，導入、定義和賦值：

import { GridApi } from 'ag-grid-community';

然后：

gridApi!: GridApi; // variable

constructor() {}

onGridReady(params: GridReadyEvent) {
  this.gridApi = params.api;
  // other codes...
}


expand() {
  this.gridApi.expandAll();
}

collapse() {
  this.gridApi.collapseAll();
}

但是，如果你想折疊和展開特定節點級別的組，你可以使用以下示例：

collapse2ndLevel() {
  this.gridApi.forEachNode((node) => {
    if (node.level === 1) {
      node.setExpanded(false);
    }
  });
}

expand2ndLevel() {
  this.gridApi.forEachNode((node) => {
    if (node.level < 2 && node.isExpandable) {
      node.setExpanded(true);
    }
  });
}

collapse3rdLevel() {
  this.gridApi.forEachNode((node) => {
    if (node.level === 2 && node.isExpandable) {
      node.setExpanded(false);
    }
  });
}

expand3rdLevel() {
  this.gridApi.forEachNode((node) => {
    if (node.level < 3 && node.isExpandable) {
      node.setExpanded(true);
    }
  });
}

請查看我在 Plnkr 上創建的這個示例。