AG-Grid 单元格编辑器 - 如何将数据保存到后端

Question

您能否帮助我提供一个示例，该示例显示了在angular js中编辑1/多个单元格后将数据保存到后端服务？我找到了有关如何编写自定义单元格编辑器和使用 ag grid 的默认单元格编辑器的示例，但找不到如何以及在何处插入将编辑保存到后端服务的代码？

Answer 1

有两种

方法可以将数据保存在 Ag-Grid 上。

1(获取所有数据并将所有内容发送到后端。

2(仅获取已更改的行，并将这些行发送到后端。如果要侦听对特定行的特定更改，可以在组件模板上定义 ag-grid 组件时使用 onCellValueChanged 事件绑定。基本上，每当单元格有任何更改时，整行将被"标记为"已修改(将自定义属性modified分配给 true(。

当您需要将修改后的行发送到后端时，您将获得所有行数据，并过滤掉"modified"属性等于true的行。

请在组件上初始化 Ag-grid 的参数 api。

下面的代码适用于#2，因为这就是您要查找的。

 <ag-grid-angular 
.
.
(gridReady)="onGridReady($event)"
(cellValueChanged)="onCellValueChanged($event)"
>

在您的组件.ts上，每次进行任何更改时都会触发onRowValueChanged方法

。

export class YourComponent {
  private gridApi;
  private gridColumnApi;
   .
   . 
  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
  }
  onCellValueChanged(event) {
    //console.log(event) to test it
    event.data.modified = true;
  }
  saveModifiedRows() {
    const allRowData = [];
    this.gridApi.forEachNode(node => allRowData.push(node.data));
    const modifiedRows = allRowData.filter(row => row['modified']);
    // add API call to save modified rows
  }