如何在无限行模式下在 ag-grid 上 select 一行

Question

这里有很多类似的问题，但我无法找到我的基本要求的解决方案。

我在 Infinite Row model 的 React 中使用 ag-grid。 数据按 100 个块从服务器加载。

我想预先选择一行 - 例如行 id 500。这需要加载正确的块，一旦加载，然后选择正确的节点。

此处示例：（单击跳转到 500按钮）演示代码

const jumpTo500 = () => {
  if (gridApi.getInfiniteRowCount() < 501) {
    gridApi.setRowCount(501, false);
  }
  gridApi.ensureIndexVisible(500, 'middle');

  gridApi.forEachNode((node) => {
    if (node.rowIndex === 499) {
      node.setSelected(true);
    }
  });
};

现在我需要在按钮上单击两次，因为我尝试在加载节点之前将 select 排到行。

问题：如何知道何时渲染网格和加载新节点？

永远不会调用onRowDataChanged()和onRowDataUpdated()事件。

Answer 1

我目前的解决方法...

    const jumpTo500 = async () => {
      if (!gridApi) return;

      const node = gridApi.getModel().getRow(500);
      if (node) {
        until(() => !!node.id, 50, 5000)
            .then((ms) => {
                console.log("ok in ", ms, "ms");
                node.setSelected(true, false, true);
                gridApi.ensureNodeVisible(node, "middle");
            })
            .catch((ms) => console.log("timeout after", ms, "ms"));
      }
  };

一旦 node.id 可用，我就可以 select 行。 实用方法 until() 将每 50 毫秒重试一次，直到条件正常或 5 秒后超时。

    const until = (condition: () => boolean, interval: number, timeout: number) =>
      new Promise<number>((resolve, reject) => {
        if (condition()) {
            resolve(0);
        }
        const start = new Date().getTime();
        const intervalTimer = setInterval(() => {
            const elapsed = new Date().getTime() - start;
            if (condition()) {
                clearInterval(intervalTimer);
                resolve(elapsed);
            } else {
                if (elapsed >= timeout) {
                    clearInterval(intervalTimer);
                    reject(elapsed);
                }
            }
        }, interval);
    });

Answer 2

在createDataSource中，设置好数据后，调用callback。

onGridReady 中的代码：

    const calllbackAfterSetData = (): boolean => {
        const defIndex = localeSaver.loadObjectOrDefault<RowClicked>({ [rowClicked]: null })
        const infiniteRow = params.api.getInfiniteRowCount()

        if (!defIndex || defIndex.rowIndex === -1 || !infiniteRow) return false

        if (infiniteRow < (defIndex.rowIndex + 1)) {
            params.api.setRowCount(defIndex.rowIndex + 1, false)
        }
        params.api.ensureIndexVisible(defIndex.rowIndex, "top") 

        const node = params.api.getRowNode(defIndex.nodeId)

        if (node) {
            node?.setSelected(true)
            localeSaver.clear({ [rowClicked]: null })

            return true
        } else return false
    }

    const dataSource: IDatasource = dataSource(params.api, params.columnApi, calllbackAfterSetData)
    params.api.setDatasource(dataSource)

createDataSource 中的代码：

function dataSource( gridApi: GridApi, columnApi: ColumnApi, calllbackAfterSetData?: () => boolean) {
    return {
        getRows: async (params: IGetRowsParams) => {

            const response: string[] = []
            // any fetch
            if (response) {
                params.successCallback(response, 100)

                if (calllbackAfterSetData) {
                    const result = calllbackAfterSetData()
                    if (result) calllbackAfterSetData = undefined
                }

            } else {
                params.failCallback()
            }
        },


        destroy: () => {

        }
    }
}