web-dev-qa-db-ja.com

Ag-grid-Enterpriseボタンを使用してすべての行を展開/縮小しますか？ FFとEdgeの非常に遅いクラッシュ

グリッドに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);
                });
            }
        }

enter image description here

javascriptangularag-grid
6
DirtyMind

ドキュメントに従って：

Node.setExpanded（）を呼び出すと、グリッドが再描画されます。展開するノードが多数ある場合は、node.expanded = trueを直接設定し、終了時にapi.onGroupExpandedOrCollapsed（）を呼び出してグリッドを取得し、グリッドを1回だけ再描画することをお勧めします。

だから私は以下のように私のコードを変更しました：

this.gridOptions.api.forEachNode(node => {
  node.expanded = true;
});
this.gridOptions.api.onGroupExpandedOrCollapsed();

Ag-gridDocumentationページ グループAPI内

5
DirtyMind

行のグループ化機能 を使用していて、展開できるグループ化された行が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秒かかりました。

6
Jarod Moser

APIにはexpandAllとcollapseAllがあります。

api.expandAll();
api.collapseAll();

AGグリッドの不安定なアーキテクチャにより、行データが変更されるか、グリッドが再マウント/再レンダリングされると、（行の選択などとともに）拡張状態が失われることに注意してください。 deltaRowDataModeを使用する必要がありますが、これを防ぐために行に一意のIDを指定してください（もちろん、このオプションは、報告したバグのデバッグが困難になる可能性があります）。

また、この場合にユーザーの展開を復元したい場合は、個々のノードを繰り返し展開して折りたたむ以外に選択肢はありません。

また、マスター/詳細（エンタープライズ機能）グリッドでは機能しないようです...

3
Dominic