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

Question

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

Answer 1

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

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

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

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

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

以下代码用于#2，因为那是您正在寻找的。​​p>

 <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

  }