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

【问题标题】：Use Enter key to navigate to cell below in AG-Grid使用 Enter 键导航到 AG-Grid 中的下面的单元格
【发布时间】：2017-10-06 14:28:04
【问题描述】：

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

应遵守以下规则：

按 enter 将聚焦单元格（默认设置）
再次按enter将停止编辑+将焦点移到下面的单元格
shift+enter 应该停止编辑 + 将焦点移到上方的单元格
方向键和 Tab 等应该正常工作

我们正在使用 AngularJS。

【问题讨论】：

标签： navigation cell edit ag-grid

【解决方案1】：

编辑：

此功能已添加到 AG-Grid！ Documentation here.

原始（过时）答案：

我们最终在 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

【讨论】：

很棒的方法，我添加了 api.clearRangeSelection();就在 clearFocusedCell() 之后，因为我的主题显示上一行以灰色背景选中。

【解决方案2】：

您还可以使用 'keydown' 事件来全局跟踪最后按下的键，这是您的答案的变体。

let eventKey;
let validKeys = ['Enter'];

gridDiv.addEventListener('keydown', function(event) {
    eventKey = event.key;
});

onCellEditingStopped: function (event) {
    if(validKeys.includes(eventKey)){
        var currentCell = gridOptions.api.getFocusedCell();
        var finalRowIndex = gridOptions.api.paginationGetRowCount()-1;

        if (currentCell.rowIndex === finalRowIndex) {
            return;
        }

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

【讨论】：