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实现全行编辑的主要内容,如果未能解决你的问题,请参考以下文章

如何为 ag-grid 行编辑实现验证规则

Ag-grid : 单元格编辑器 Aginit 被调用两次

使用 ag-grid 进行单元格编辑的自定义日期选择器

在行分组级别 ag-grid 启用对单元格字段的编辑

WPF DataGrid 全行编辑

如何在 ag-grid 中捕获行悬停事件?