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
}
你能帮我举个例子,显示在 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
}