农业网格单元格编辑器-如何将数据保存到后端 [英] ag-grid cell editors - how to save data to backend

问题描述

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

Could you please help me with an example that shows saving data to backend service after editing 1/many cells in angular js? I found examples on how to write a custom cell editor and use ag grid's default cell editors but could not find how and where to plug in my code that saves edits to backend services?

推荐答案

有两种方法可以将数据保存到Ag-Grid中。

There are two ways you can save your data on your Ag-Grid.

1）获取所有数据并发送所有内容

1) Get all data and send everything to the backend.

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

2) Get only the rows which you have changed, and send these rows to the backend. If you want to listen to specific changes to a particular row, you can make use of the onCellValueChanged event bindings when defining the ag-grid component on your component template. Basically, whenever the cell has any changes, the entire row will be 'marked' as modified (assign the custom property modified to true).

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

When you need to send the modified rows to your backend, you get all row data, and filter out the rows whereby the 'modified' property is equals to true.

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

Do initialise Ag-grid's params api on your component.

下面的代码适用于＃2，因为这是您要查找的内容。

The below code is for #2 since that is what you are seeking.

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

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

and on your component.ts, the onRowValueChanged method will be fired every time you make any changes

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

  }

这篇关于农业网格单元格编辑器-如何将数据保存到后端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！