如何在无限行模式下 select ag-grid 上的一行
How to select a row on ag-grid in Infinite Row mode
这里有很多类似的问题,但我无法找到满足我的基本要求的解决方案。
我在无限行模型中使用 React 中的 ag-grid。数据以 100 块为单位从服务器加载。
我想预先 select 一行 - 例如行 ID 500。这需要加载正确的块,一旦加载,然后 select 访问正确的节点。
此处示例:(单击 跳转到 500 按钮)
demo code
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()
事件从未被调用。
我目前的解决方法...
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);
});
createDataSource中,设置数据后调用回调
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: () => {
}
}
}
这里有很多类似的问题,但我无法找到满足我的基本要求的解决方案。
我在无限行模型中使用 React 中的 ag-grid。数据以 100 块为单位从服务器加载。
我想预先 select 一行 - 例如行 ID 500。这需要加载正确的块,一旦加载,然后 select 访问正确的节点。
此处示例:(单击 跳转到 500 按钮) demo code
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()
事件从未被调用。
我目前的解决方法...
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);
});
createDataSource中,设置数据后调用回调
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: () => {
}
}
}