使用箭头键导航/选择农业网格表格行 [英] Navigate/select ag-grid table row with arrow keys

问题描述

我正在尝试浏览Reaction应用程序上的一个农业网格表的行。这意味着当我按UP或DOWN时，当前选定的行将更改为上一行/下一行。

我在ag-grid docs上尝试了该示例。但我不知道如何访问网格选项。 我将如何使其工作？

推荐答案

我想我找到了一种方法，尽管我正在使用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"
      );
  }
};

主要步骤：

1. 创建引用const tableRef = React.useRef();
2. 将其与上面的函数一起关联到agGRID：

<AgGridReact ... ref={tableRef} navigateToNextCell={arrowKeysNavigation(tableRef)}/>

这篇关于使用箭头键导航/选择农业网格表格行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！