时间戳

首页 > 解决方案 > Ag-Grid 编辑数据并发送到服务器

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

问题描述

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

简而言之，Ag-Grid 如何在编辑后保存行数据并在单击提交按钮时发送到服务器。任何人如果在 Javascript 上实现了这个，请发表评论，将尝试在 Angular 上使用它

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

标签： angulartypescriptag-grid

解决方案

如果您想监听特定行的特定更改，您可以在组件模板上定义 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;
}

推荐阅读