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

Question

我们需要在AG-Grid中编辑单元格导航,但我找不到办法来做我们需要的东西.这不是一个巨大的变化,而是对我们用户的重大变化.我们需要的导航规则类似于Google Spreadsheet单元格导航.

以下规则应适用:

• 按Enter将聚焦单元格(默认)
• 再次按Enter将停止编辑+将焦点移至下方的单元格
• shift + enter应该停止编辑+将焦点移动到上面的单元格
• 箭头键和标签等应该像平常一样工作

我们正在使用AngularJS.

Answer 1

编辑:

此功能已添加到AG-Grid! 文档在这里.

原创(过时)答案:

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

这是一个有效的插件示例:https://plnkr.co/edit/quhyS05SSVzmuDlCErZD ？ p = preview