Ag-grid-Enterprise expand/collapse 所有行都使用按钮？ FF 和 Edge 崩溃非常慢

Question

我创建了一个按钮来展开 ag-grid (Enterprise) 中的所有行，在网格中有 150 行。它在 Chrome 中运行良好，但在最新的 FF 和 Edge 中显示警告，称该网页使您的浏览器变慢。 有没有更好的方法来扩展所有行？大约需要 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);
                });
            }
        }

Answer 1

我假设您正在使用 row grouping feature，并且您的意思是有 150 个分组行可以展开。

目前，您的代码正在针对每一行数据执行...而不仅仅是那些能够扩展的数据。因此，假设每组中有 50 行左右的数据，您将调用 setExpanded 函数 7500 次。您可以通过在调用 setExpanded:

之前进行检查，将其限制为仅在分组行上调用 setExpanded

public expandAll(value:boolean) {
    this.gridOptions.api.forEachNode((node) =>{
        if (node.group)
            node.setExpanded(value);
    });
}

在 this example 上测试它，在 firefox

中，110 行组大约需要 2 秒，511 行组需要 5 秒

Answer 2

根据文档：

Calling node.setExpanded() causes the grid to get redrawn. If you have many nodes you want to expand, then it is best to set node.expanded=true directly, and then call api.onGroupExpandedOrCollapsed() when finished to get the grid to redraw the grid again just once.

所以我修改了我的代码如下：

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

Ag-gridDocumentation page 组内 Api

Answer 3

API有expandAll和collapseAll:

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

请注意，由于 AG Grid 的糟糕架构，如果行数据更改或网格为 re-mounted/re-rendered，扩展状态（以及行选择等）将丢失。您应该使用 deltaRowDataMode 但请确保为您的行提供唯一 ID 以帮助防止这种情况发生（尽管此选项当然会导致一些难以调试的错误，我已报告过）。

此外，如果您想在这种情况下恢复用户扩展，您别无选择，只能迭代 expand/collapse 个单独的节点。

它们似乎也不适用于主从（企业功能）网格...

Answer 4

我希望这会有所帮助，性能似乎还不错。参考自 - https://github.com/ag-grid/ag-grid/issues/2179

但最好还是检查一下这些组是否存在。这提高了性能并且扩展速度快得多。

    this.gridApi.forEachNode((node) => {
      if(node?.group) {
        node.setExpanded(true)
      }
    })

Answer 5

我使用服务器端行模型和单一决策，它是更新数据后的 purgeServerSideCashe()。 https://www.ag-grid.com/archive/23.2.0/javascript-grid-server-side-model-grouping/#example-purging-caches。它关闭所有展开的行

Ag-grid-Enterprise expand/collapse 所有行都使用按钮？ FF 和 Edge 崩溃非常慢

Ag-grid-Enterprise expand/collapse all row using button? Very slow crashing FF and Edge

javascript

ag-grid

angular