我正在尝试在react应用程序上导航 ag-grid 表的行。这意味着当我向上或向下按时，当前选定的行将更改为上一行/下一行。
我已经尝试了ag-grid docs上的示例。但我不知道如何访问 gridOptions。我将如何进行这项工作？
使用箭头键导航/选择 ag-grid 表行
IT技术
reactjs
navigation
ag-grid
2022-07-22 01:33:30
1个回答
我想我找到了一种方法，尽管我正在使用 useRef 并且我更愿意避免它。
这是主要功能：
const arrowKeysNavigation = (tableRef) => (params) => {
var previousCell = params.previousCellPosition;
var suggestedNextCell = params.nextCellPosition;
const api = tableRef.current.api;
var KEY_UP = 38;
var KEY_DOWN = 40;
var KEY_LEFT = 37;
var KEY_RIGHT = 39;
switch (params.key) {
case KEY_DOWN:
previousCell = params.previousCellPosition;
// set selected cell on current cell + 1
api.forEachNode(function (node) {
if (previousCell.rowIndex + 1 === node.rowIndex) {
node.setSelected(true);
}
});
return suggestedNextCell;
case KEY_UP:
previousCell = params.previousCellPosition;
// set selected cell on current cell - 1
api.forEachNode(function (node) {
if (previousCell.rowIndex - 1 === node.rowIndex) {
node.setSelected(true);
}
});
return suggestedNextCell;
case KEY_LEFT:
case KEY_RIGHT:
return suggestedNextCell;
default:
throw new Error(
"this will never happen, navigation is always one of the 4 keys above"
);
}
};
主要步骤：
- 创建参考
const tableRef = React.useRef(); - 将它与上面的函数关联到 ag-grid：
<AgGridReact ... ref={tableRef} navigateToNextCell={arrowKeysNavigation(tableRef)}/>