使用 Enter 键导航到 AG-Grid 中下面的单元格

我们需要编辑单元格导航AG-Grid但我没有找到一种方法来做我们需要的事情。这不是一个巨大的变化，但对我们的用户来说却是至关重要的变化。我们需要的导航规则类似于Google Spreadsheet单元格导航。

应适用以下规则：

• 紧迫enter将聚焦单元格（默认）
• 紧迫enter再次将停止编辑+ 将焦点移动到下面的单元格
• Shift+输入应该停止编辑+ 将焦点移至上方单元格
• 方向键 和 Tab 等应该像平常一样工作

我们正在使用 AngularJS。

EDIT:

AG-Grid 已添加此功能！文档在这里。 https://www.ag-grid.com/javascript-grid-cell-editing/#enter-key-down

原始（过时）答案：

我们最终在 AG-Grid 论坛上询问。没有简单或干净的方法可以做到这一点。基本上，您向网格添加一个事件，该事件侦听按下“Enter”的声音，然后手动将焦点向下移动一行。

当“Enter”事件被触发时，您必须知道用户当前是否正在编辑，并且还要注意用户是否在最后一行。

gridDiv.addEventListener('keydown', function(evt) {
  if(editing && evt.key === 'Enter') {
      var currentCell = gridOptions.api.getFocusedCell();
      var finalRowIndex = gridOptions.api.paginationGetRowCount()-1;

      // If we are editing the last row in the grid, don't move to next line
      if (currentCell.rowIndex === finalRowIndex) {
          return;
      }
      gridOptions.api.stopEditing();
      gridOptions.api.clearFocusedCell();

      gridOptions.api.startEditingCell({
        rowIndex: currentCell.rowIndex + 1,
        colKey: currentCell.column.colId
      });
  }
});

编辑标志在网格选项中手动管理。

var editing = false;

var gridOptions = {
    columnDefs: columnDefs,
    rowData: students,
    onCellEditingStarted: function (evt) {
        editing = true;
    },
    onCellEditingStopped: function (evt) {
        editing = false;
    }
};

这是一个工作中的 plunker 示例：
https://plnkr.co/edit/quhyS05SSVzmuDlCErZD?p=preview https://plnkr.co/edit/quhyS05SSVzmuDlCErZD?p=preview