使用 forEachNode 的行选择非常慢答案

【问题标题】：Row selection using forEachNode very slow使用 forEachNode 的行选择非常慢
【发布时间】：2019-02-25 13:09:12
【问题描述】：

我正在使用 AG Grid React。我有一千行数据。我正在尝试根据索引选择一系列行。

    gridOptions.api.forEachNode(node => {
        if (node.childIndex >= startIndex && node.childIndex < endIndex) {
            node.setSelected(true)
        }
    });

事实证明，这非常繁琐，通常在 UI 上需要 30 秒。似乎setSelected 触发了多个渲染周期。正确的做法是什么？

【问题讨论】：

AG 只是慢你的代码没有错。确保您没有关闭虚拟化，因为即使对于 AG，这听起来也很慢。我有大约 700 件物品，花了几秒钟，这似乎很糟糕。

标签： ag-grid

【解决方案1】：

问题是 - setSelected(newValue) 调度事件。当我们为一千个项目循环执行此操作时（说） - 有一千个事件，一千个请求排队等待 React 中的异步更新，这可以解释所有延迟。

我使用另一个版本的 setSelected - setSelected(newValue, clearSelection, suppressFinishActions) 修复了它。不幸的是，这没有写在官方文档中。想法是将此版本用于除了最后一个之外的所有选择，以便抑制所有事件调度并使用我们一直使用的正常选择来选择最后一个元素，以便它也触发必要的onRowSelected、onSelectionChanged等事件正常工作。

        this.api.forEachNodeAfterFilter(node => {
            if (node.childIndex >= startIndex && node.childIndex < endIndex) {
                selectedNodes.push(node);
            }
        });

        if (selectedNodes.length > 0) {
            // setSelected re-renders every time so use suppressFinishActions except last one
            for (let i = 0; i < selectedNodes.length - 1; i++) {
                selectedNodes[i].setSelected(true, false, true);
            }
            selectedNodes[selectedNodes.length - 1].setSelected(true);
        }

【讨论】：

@Dominic 这对您的情况有帮助吗？
如何为服务器端行模型做到这一点？
@abksrv 感谢您提供明确解释的解决方案。
@abksrv 很棒的解决方案..！像魅力一样工作:)

【解决方案2】：

您可以尝试使用分页来加载数据块而不是整个数据。 Pagination Docs

【讨论】：

分页可能无济于事，因为最小页面大小可能在 100 左右，即使是 20-30 行，这个问题也很重要。

【解决方案3】：

确保您没有订阅任何可能导致您的代码变慢的事件，例如onRowSelected，onSelectionChanged。这些会为每个

触发

node.setSelected(true)

如果您确实有任何这些订阅事件，解决此问题的一种可能方法是在循环之前取消订阅，然后在循环之后重新订阅。

另外，根据您的用例，您可能想要使用

forEachNodeAfterFilter(节点)

为了只循环可见节点而不是

forEachNode(节点)

【讨论】：

我尝试了 forEachNodeAfterFilter - 类似的结果。我确实必须对事件有所了解，这就是为什么在选择后订阅没有意义。