Ag-Grid编辑数据并发送到服务器 [英] Ag-Grid edit data and sending to server

问题描述

Ag-grid在angular上能够创建从本地json文件获取数据的网格。
在编辑任何行时如何保存该数据，然后将其发送到服务器或本地json文件？

Ag-grid on angular able to create grid fetching data from local json file. On editing any row how to save that data and then send to server or possibly local json file ??

总之，Ag-Grid如何保存行数据编辑后，单击提交按钮发送到服务器。
如果有人在Javascript上实现此功能，请评论，将尝试在有角度的地方使用它。

In short Ag-Grid how to save row data after edit and send to server on click of Submit button. Anyone if implemented this on Javascript please comment, will try to use that on angular

请告知我，除了 > ag-grid 来实现此功能

Please let me know if there is any other best option apart from ag-grid to implement this functionality

推荐答案

如果您想听特定行的特定更改，您可以在组件模板上定义ag-grid组件时使用 onCellValueChanged 或 onRowValueChanged 事件绑定。

If you want to listen to specific changes to a particular row, you can make use of the onCellValueChanged, or onRowValueChanged event bindings when defining the ag-grid component on your component template.

 <ag-grid-angular 
.
.
(gridReady)="onGridReady($event)"
(onRowValueChanged) = onRowValueChanged($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;
   .
   . 
 onRowValueChanged: function(event) {
   console.log(event) // access the entire event object
   console.log(event.data) // access and print the updated row data
   const gridData = this.getAllData();
   // api call to save data

}

getAllData() {
  let rowData = [];
  this.gridApi.forEachNode(node => rowData.push(node.data));
  return rowData;  
}

onGridReady(params) {
  this.gridApi = params.api;
  this.gridColumnApi = params.columnApi;
}

这篇关于Ag-Grid编辑数据并发送到服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！