防止CellEditor写回对象

时间:2019-01-23 14:48:26

标签: ag-grid

我可以将ag-grid配置为不直接修改对象的属性,而是仅将更改传播到cellValueChanged()事件吗?

在使用存储库时,对于所有更改,我需要从该存储库显式调用一个方法,并且不允许直接修改该对象。目前,作为一种解决方法,我只是将我从商店传递给ag-grid的对象克隆。

请参见以下示例;我希望行console.assert(students[0].age !== params.newValue);通过。

var students = [{ age: '12' }];

var columnDefs = [
    {
        headerName: "Age",
        field: "age",
        editable: true,
        cellEditor: 'numericCellEditor'
    }
];

var gridOptions = {
    columnDefs: columnDefs,
    rowData: students,
    onCellValueChanged: function(params) {
      console.log("cell value changed");
      if (params.newValue !== params.oldValue) {
        console.assert(students[0].age !== params.newValue);
      }
    },
    components:{
        numericCellEditor: NumericCellEditor
    }
};

// function to act as a class
function NumericCellEditor() {
}

// gets called once before the renderer is used
NumericCellEditor.prototype.init = function (params) {
    // create the cell
    this.eInput = document.createElement('input');
};


// gets called once when grid ready to insert the element
NumericCellEditor.prototype.getGui = function () {
    return this.eInput;
};

// returns the new value after editing
NumericCellEditor.prototype.getValue = function () {
    return this.eInput.value;
};

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

您可以在这里运行它: https://plnkr.co/edit/3ZJEzHTcsWBRUwwzUCZo

0 个答案:

没有答案