ag-grid实现全行编辑

Posted 2023-05-03

参考技术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');
,