（Ag-Grid）在編輯時，如何立即更改值，而不是在單元格失去焦點后？

Question

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

但是onCellValueChanged僅在單元格失去焦點時觸發，我無法弄清楚立即獲取值的方法是什么。 我唯一的限制 - 我不能添加自定義 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);
});

這里有關於何時觸發onCellEditingStopped的詳細說明。

您還可以檢查完整示例。

Answer 2

您可以在編輯時通過利用 Grid Event 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