Ag-grid-Enterprise使用按钮展开/折叠所有行？非常慢的FF和Edge崩溃

Question

我创建了一个按钮来展开网格中有150行的ag-grid(Enterprise)中的所有行.它在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

根据文档：

调用node.setExpanded()会导致网格重新绘制。如果你有很多节点要扩展，那么最好node.expanded=true直接设置，然后api.onGroupExpandedOrCollapsed()在完成后调用获取网格重新绘制网格一次。

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

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

Group Api 中的Ag-gridDocumentation 页面

Answer 2

API具有expandAll和collapseAll：

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

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

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

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

Answer 3

我假设您正在使用行分组功能,并且您的意思是有150个分组的行可以展开.

目前,您的代码将针对每一行数据执行...而不仅仅是能够扩展的代码.假设你在每组中有50行左右的数据,你调用setExpanded函数7500次.您可以setExpanded通过在调用之前进行检查来将此限制为仅调用已分组的行setExpanded:

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

在这个例子中测试它,对于110个行组大约需要2秒,对于firefox中的511个行组大约需要5秒