(Ag-Grid)在编辑过程中,如何立即改变价值,而不是在失去焦点之后?

时间:2019-07-25 08:15:40

标签: javascript ag-grid ag-grid-angular

在ag-grid中,在表中输入一些值时,我需要在inputchange事件中接收更新的值。

但是onCellValueChanged仅在单元格失去焦点时才触发,我无法弄清楚立即获取值的方法是什么。 我唯一的限制-我无法添加自定义cellEditor,它必须是网格默认设置。

请问有人可以提出这种行为吗?

2 个答案:

答案 0 :(得分: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

答案 1 :(得分: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