グリッドに150行あるag-grid(Enterprise)のすべての行を展開するボタンを作成しました。 Chrome=で正常に動作していますが、最新のFFとEdgeで、Webページがブラウザの動作を遅くしているという警告が表示されています。より良い方法すべての行を展開するには、約10〜15秒かかります
HTML
<button (click)="expandAll(expand)">Expand/Collapse</button>
JavaScript
this.columnDefs = [
{
headerName: "",
field: "",
cellRenderer: "group",// for rendering cell
suppressMenu: true,
suppressSorting: true
}
]
// This is how I am creating fullrow width
this.gridOptions = <GridOptions>{
isFullWidthCell: function (rowNode) {
var rowIsNestedRow = rowNode.flower;
return rowIsNestedRow;
},
fullWidthCellRendererFramework: AgGridInventorRowComponent,
doesDataFlower: function (dataItem) {
return true;
}
public expandAll(value:boolean) {
if(value) {
this.gridOptions.api.forEachNode((node) =>{
node.setExpanded(true);
});
} else {
this.gridOptions.api.forEachNode((node) =>{
node.setExpanded(false);
});
}
}
ドキュメントに従って:
Node.setExpanded()を呼び出すと、グリッドが再描画されます。展開するノードが多数ある場合は、node.expanded = trueを直接設定し、終了時にapi.onGroupExpandedOrCollapsed()を呼び出してグリッドを取得し、グリッドを1回だけ再描画することをお勧めします。
だから私は以下のように私のコードを変更しました:
this.gridOptions.api.forEachNode(node => {
node.expanded = true;
});
this.gridOptions.api.onGroupExpandedOrCollapsed();
Ag-gridDocumentationページ グループAPI内
行のグループ化機能 を使用していて、展開できるグループ化された行が150個あることを意味していると思います。
現在、コードはデータのすべての行に対して実行されています...展開可能なものだけではありません。したがって、各グループに50行程度のデータがあるとすると、setExpanded
関数を7500回呼び出します。 setExpanded
を呼び出す前にチェックを入れることで、グループ化された行でsetExpanded
を呼び出すだけに制限できます。
public expandAll(value:boolean) {
this.gridOptions.api.forEachNode((node) =>{
if (node.group)
node.setExpanded(value);
});
}
この例 でテストすると、Firefoxで110行グループの場合は約2秒、511行グループの場合は5秒かかりました。
APIにはexpandAll
とcollapseAll
があります。
api.expandAll();
api.collapseAll();
AGグリッドの不安定なアーキテクチャにより、行データが変更されるか、グリッドが再マウント/再レンダリングされると、(行の選択などとともに)拡張状態が失われることに注意してください。 deltaRowDataMode
を使用する必要がありますが、これを防ぐために行に一意のIDを指定してください(もちろん、このオプションは、報告したバグのデバッグが困難になる可能性があります)。
また、この場合にユーザーの展開を復元したい場合は、個々のノードを繰り返し展開して折りたたむ以外に選択肢はありません。
また、マスター/詳細(エンタープライズ機能)グリッドでは機能しないようです...