javascript Ag-grid-Enterprise 使用按钮展开/折叠所有行？FF 和 Edge 崩溃速度非常慢
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45968308/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ag-grid-Enterprise expand/collapse all row using button? Very slow crashing FF and Edge
提问by DirtyMind
I created a button to expand all the rows in ag-grid(Enterprise) having 150 rows in the grid. It is working fine in Chrome but it is showing an alert in the latest FF and Edge, saying the web page is making your browser slow. Any better approach to expand all the row? It is taking almost 10-15 second
我创建了一个按钮来扩展ag-grid（企业）中的所有行，网格中有 150 行。它在 Chrome 中运行良好，但在最新的 FF 和 Edge 中显示警报，说该网页使您的浏览器变慢。有没有更好的方法来扩展所有行？大约需要 10-15 秒
HTML
HTML
<button (click)="expandAll(expand)">Expand/Collapse</button>
JavaScript
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);
});
}
}
采纳答案by DirtyMind
As per the documentation:
根据文档：
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.
调用 node.setExpanded() 会导致网格重新绘制。如果你有很多节点想要扩展，那么最好直接设置node.expanded=true，然后在完成后调用api.onGroupExpandedOrCollapsed()让网格重新绘制网格一次。
So i modified my code like below:
所以我修改了我的代码，如下所示：
this.gridOptions.api.forEachNode(node => {
node.expanded = true;
});
this.gridOptions.api.onGroupExpandedOrCollapsed();
Ag-gridDocumentation pageinside Group Api
Group Api 中的Ag-gridDocumentation 页面
回答by Jarod Moser
I'm supposing that you are using the row grouping feature, and that you meant that there are 150 grouped rows that are able to be expanded.
我假设您正在使用行分组功能，并且您的意思是有 150 个可以扩展的分组行。
Currently your code is getting executed for every single row of data... not just the ones that are able to be expanded. So supposing you have 50 rows or so of data in each group, your calling the setExpandedfunction 7500 times. You can limit this to just calling the setExpandedon the grouped rows by putting in a check before calling setExpanded:
目前，您的代码正在为每一行数据执行……而不仅仅是那些能够扩展的数据。因此，假设每组中有 50 行左右的数据，则调用该setExpanded函数 7500 次。您可以setExpanded通过在调用之前进行检查来将其限制为仅在分组行上调用setExpanded：
public expandAll(value:boolean) {
this.gridOptions.api.forEachNode((node) =>{
if (node.group)
node.setExpanded(value);
});
}
testing it on this example, it took roughly 2 seconds for 110 row groups and 5 seconds for 511 row groups in firefox
在这个例子中测试它，110 个行组大约需要 2 秒，firefox 中 511 个行组大约需要 5 秒
回答by Dominic
The API has expandAlland collapseAll:
API具有expandAll和collapseAll：
api.expandAll();
api.collapseAll();
Note that due to the crappy architecture of AG Grid the expansion state (along with row selection etc) is lost if the row data changes or the grid is re-mounted/re-rendered. You should use deltaRowDataModebut make sure you give your rows a unique ID to help prevent this (though this option of course can cause some hard to debug bugs which I have reported).
请注意，由于 AG Grid 的糟糕架构，如果行数据更改或网格重新安装/重新渲染，扩展状态（以及行选择等）将丢失。您应该使用deltaRowDataMode但确保为您的行提供唯一 ID 以帮助防止这种情况（尽管此选项当然会导致我报告的一些难以调试的错误）。
Also if you want to restore the user expansion in this case you have no choice but to iterate and expand/collapse individual nodes.
此外，如果您想在这种情况下恢复用户扩展，您别无选择，只能迭代和扩展/折叠单个节点。
Also they don't seem to work on a master-detail (enterprise feature) grid...
此外，它们似乎不适用于主从（企业功能）网格......
回答by Srikanth V
I hope this would help, the performance seems to be fine. Took reference from - https://github.com/ag-grid/ag-grid/issues/2179
我希望这会有所帮助，性能似乎很好。参考 - https://github.com/ag-grid/ag-grid/issues/2179
But it is always better to check if the groups are present are not. That increases the performance and expanding is much much faster.
但最好检查组是否存在。这会提高性能并且扩展速度要快得多。
this.gridApi.forEachNode((node) => {
if(node?.group) {
node.setExpanded(true)
}
}
