ag-grid cell editors - 如何将数据保存到后端

ag-grid cell editors - how to save data to backend

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

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

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

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

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

在您的组件上初始化 Ag-grid 的参数 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

  }