(Ag-Grid) 在编辑时，如何立即更改值，而不是在单元格失去焦点之后？

Question

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

但是onCellValueChanged只有当cell失去焦点时才会触发，我不知道如何立即获取值。我唯一的限制 - 我无法添加自定义 cellEditor，它需要是网格默认值。

有人能告诉我如何达到这种行为吗？

Answer 1

根据 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。

Answer 2

您可以在编辑时利用网格事件获取单元格的当前值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

(Ag-Grid) 在编辑时，如何立即更改值，而不是在单元格失去焦点之后？

(Ag-Grid) While editing, how to get value changed immediately, not after cell loses focus?

javascript

ag-grid

ag-grid-angular