我可以将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