使用 Enter 键导航到 AG-Grid 中的下方单元格 [英] Use Enter key to navigate to cell below in AG-Grid

查看:112
本文介绍了使用 Enter 键导航到 AG-Grid 中的下方单元格的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我们需要在 AG-Grid 中编辑单元格导航,但我没有找到做我们需要的方法.这不是一个巨大的变化,而是我们用户的一个关键变化.我们需要的导航规则类似于 Google 电子表格单元格导航.

We need to edit the cell navigation in AG-Grid but I am not finding a way to do what we need. This is not a huge change but a crucial change for our users. The navigation rules we need is similar to Google Spreadsheet cell navigation.

应遵守以下规则:

  • 回车将聚焦单元格(默认)
  • 再次按回车将停止编辑+将焦点移动到下方的单元格
  • shift+enter 应该停止编辑 + 将焦点移到上面的单元格
  • 方向键和 Tab 等应该正常工作
  • Pressing enter will focus the cell (is default)
  • Pressing enter again will stop editing + move focus to cell below
  • shift+enter should stop edit + move focus to cell above
  • Arrow keys and Tab etc. should work like normal

我们使用的是 AngularJS.

We are using AngularJS.

推荐答案

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

This feature has been added to AG-Grid! Documentation here.

原始(过时)答案:

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

We ended up asking on AG-Grid forum. There was no easy or clean way to do this. Basically you add an event to the grid that listens to 'Enter' being pressed and then manually move the focus down one row.

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

You have to know if the user is currently editing when the 'Enter' event is fired and also watch out if the user is on the last line.

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
      });
  }
});

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

The editing flag is managed manually in grid options.

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

Here is a working plunker example:
https://plnkr.co/edit/quhyS05SSVzmuDlCErZD?p=preview

这篇关于使用 Enter 键导航到 AG-Grid 中的下方单元格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆