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

我假设您使用的是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上进行测试，对于110个行组大约花了2秒钟，对于firefox中的511个行组花了5秒钟

Answer 2

完美的解决方案Alok。对于有角度的用户，将“ this”替换为“ $ scope”：

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

Answer 3

API具有expandAll和collapseAll：

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

请注意，由于AG Grid笨拙的体系结构，如果行数据更改或重新安装/重新呈现网格，则扩展状态（以及行选择等）将丢失。

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

它们似乎也无法在主从（企业功能）网格上工作...

Answer 4

As per the documentation :

调用node.setExpanded（）会导致网格重绘。如果你想扩展许多节点，那么最好直接设置node.expanded = true，然后在完成时调用api.onGroupExpandedOrCollapsed（）以使网格再次重绘网格一次。 < /强> 所以我修改了我的代码，如下所示：

this.gridOptions.api.forEachNode(node =>{ node.expanded= true; }); this.gridOptions.api.onGroupExpandedOrCollapsed();
Api组内的
Ag-gridDocumentation page

Answer 5

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

但是最好总是检查是否存在这些组。这样可以提高性能，并且扩展要快得多。

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

Answer 6

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

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

6 个答案: