ag-grid实现全行编辑
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ag-grid实现全行编辑相关的知识,希望对你有一定的参考价值。
参考技术A (1)editable: true(2)editType: "fullRow"
* 因近期项目使用到ag-grid,分享一下用到的功能api,后续持续更新。
ag-grid:当列可编辑时如何在 ag-grid 中获取旧值和新值
【中文标题】ag-grid:当列可编辑时如何在 ag-grid 中获取旧值和新值【英文标题】:ag-grid : how to get old value and new value in ag-grid when column in editable 【发布时间】:2020-12-16 11:39:18 【问题描述】:我正在使用 ag-grid 和 angular 8。
使用下面给出的代码,我可以在前三列可编辑的网格上呈现数据,在第四列中我有一个更新按钮。
现在点击更新按钮。我必须发送所有三个可编辑列值的旧值以及新值,以便我可以在后端更新它们。
但我不确定如何从已编辑的网格中获取旧值和新值。
this.service.getData().subscribe((data) =>
this.columnheaders = (Object.keys(data[0]));
this.rows = data;
for (var x in this.columnheaders)
this.columns[x] = headerName: this.columnheaders[x], field: this.columnheaders[x], editable: true ;
this.columns[3] =
headerName: 'Update', cellRenderer: function (params)
var eCell = document.createElement('span');
eCell.innerHTML = '<button>Update</button>';
return eCell;
;
);
【问题讨论】:
【参考方案1】:您可以收听以下事件并将旧值保存在一些变量/对象中,您可以在单击按钮时使用这些值。
onCellEditingStarted: function(event)
var oldCellValue = event.value; // save this value by attaching it to button or some variable
console.log('cellEditingStarted');
,
onCellEditingStopped: function(event)
var editedCellValue = event.value;
console.log('cellEditingStopped');
,
【讨论】:
以上是关于ag-grid实现全行编辑的主要内容,如果未能解决你的问题,请参考以下文章