Ag-Grid 编辑数据并发送到服务器

Question

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

简而言之，Ag-Grid 如何在编辑后保存行数据并在单击“提交”按钮后发送到服务器。如果有人在 Javascript 上实施了此功能，请发表评论，将尝试在 angular

上使用它

请让我知道除了 ag-grid 之外是否还有其他最佳选择来实现此功能

Answer 1

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

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

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

 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 编辑数据并发送到服务器

Ag-Grid edit data and sending to server

typescript

ag-grid

angular