（Ag-Grid）在编辑时，如何立即改变值，而不是在单元格失去焦点后？答案

【问题标题】：(Ag-Grid) While editing, how to get value changed immediately, not after cell loses focus?（Ag-Grid）在编辑时，如何立即改变值，而不是在单元格失去焦点后？
【发布时间】：2019-12-03 10:56:12
【问题描述】：

在 ag-grid 中，在表格中输入一些值时，我需要接收 input 或 change 事件的更新值。

但onCellValueChanged 仅在单元格失去焦点时触发，我无法弄清楚立即获取值的方法是什么。我唯一的限制 - 我不能添加自定义单元格编辑器，它需要是网格默认值。

有人可以建议如何达到这种行为吗？

【问题讨论】：

Mila，“接收并更新”是指“接收并更新”还是“接收更新”？请修复这个。您还可以通过 StackOverflow 标记突出显示关键字，例如在“更改”和其他脚本关键字周围添加“`”。
有人能解决这个问题吗？我也有同样的问题

标签： javascript ag-grid ag-grid-angular

【解决方案1】：

您可以在编辑时通过利用网格事件onCellKeyDown获取单元格的当前值：

https://www.ag-grid.com/javascript-grid/keyboard-navigation/#keyboard-events

var gridOptions = {
    onCellKeyDown: params => {
        console.log('current value', params.event.target.value)
    },
}

请查看此示例：https://plnkr.co/edit/GbMglD1fxTTeSZFj

【讨论】：

【解决方案2】：

根据ag-grid，您可以使用自定义回调onCellEditingStopped。

这将在每次单元格编辑结束时触发。

您可以直接在网格选项对象上定义它，也可以像这样访问编辑后的值（及其行和列）：

const gridOptions = {
  columnDefs: [/* whatever */],
  defaultColDef: {/* whatever */},
  rowData: rowData,
  onCellEditingStopped: function(event) {
    console.log(event);
    console.log(event.oldValue); // cell's previous value
    console.log(event.newValue); // cell's new value
    console.log(event.column); // the column that was edited
    console.log(event.data); // the row that was edited
  },
};

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
  var gridDiv = document.querySelector('#myGrid');
  new agGrid.Grid(gridDiv, gridOptions);
});

Here 你有一个关于何时触发这个onCellEditingStopped 的详细解释。

您还可以检查full example。

【讨论】：

不幸的是，这个事件似乎很晚才触发 - 只有当单元格的焦点丢失时