当我们在编辑模式下从一个单元格导航到另一个单元格时是否触发了事件 - ag grid

【问题标题】：Is there an event triggered when we navigate from one cell to another in edit mode - ag grid当我们在编辑模式下从一个单元格导航到另一个单元格时是否触发了事件 - ag grid
【发布时间】：2020-12-13 21:28:03
【问题描述】：

我一直在使用 Ag 网格社区和企业版 - 版本 21。我有一个用例，每次单元格的值发生变化时我都需要调用 api。我知道在单个单元格编辑模式的情况下，在每个单元格中完成编辑后会触发 onCellValueChanged 事件。但我使用的是全行编辑模式。因此，在我的情况下，onCellValueChanged 事件将在所有列的行编辑结束时触发。但我正在寻找一个事件，该事件将在每个单元格被编辑后以及我们导航到下一个单元格时调用。我搜索了 ag 网格文档，但找不到任何此类事件。不确定我是否遗漏了什么。任何帮助将非常感激。提前致谢。干杯！

【问题讨论】：

如果你想这样做。恐怕您必须编写自己的单元格编辑器并自己收听焦点输入/焦点输出事件，以便您知道何时发生切换。

标签： ag-grid ag-grid-react

【解决方案1】：

如果您假设用户会使用快捷方式移动到下一个/上一个单元格，则可以这样做。在单元格之间跳转的默认快捷键是Tab 和Shift+Tab。所以实现就是监听onCellKeyDown事件来知道用户何时在编辑器单元格之间跳转，并用更新后的值调用API

<AgGridReact
  editType="fullRow"
  onCellKeyDown={(e) => {
    const TAB_KEY = 9;
    const getValue = () =>
      e.api
        .getCellEditorInstances({ rowNodes: [e.node] })
        .map((instance) => instance.eInput.value);

    if (e.event.shiftKey) {
      if (e.event.keyCode === TAB_KEY) {
        console.log("Jump to previous editor");
        console.log(getValue());
      }
    } else if (e.event.keyCode === TAB_KEY) {
      console.log("Jump to next editor");
      console.log(getValue());
    }
  }}
  {...}
/>

现场示例

打开控制台查看更改

【讨论】：