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

编辑:

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

我们最后在AG电网论坛上提问。没有简单或干净的方法可以做到这一点。基本上,您可以向网格中添加一个事件,该事件侦听按下“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

您还可以使用“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
        });
    }
}