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

Question

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

Answer 1

您可以通过两种方式将数据保存在 Ag-Grid 上。

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

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

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

请在您的组件上初始化 Ag-grid 的 params api。

以下代码适用于 #2，因为这是您正在寻找的。

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

在您的 component.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

  }