在使用Angular 6的ag-Grid执行整行更新时,获取已编辑的列(包含数据)可以通过以下步骤实现:
import { Component } from '@angular/core';
import { GridOptions } from 'ag-grid-community';
@Component({
selector: 'app-grid',
templateUrl: './grid.component.html',
styleUrls: ['./grid.component.css']
})
export class GridComponent {
gridOptions: GridOptions;
rowData: any[];
constructor() {
this.gridOptions = <GridOptions>{
// 配置ag-Grid的一些属性
};
}
// 初始化ag-Grid的列定义和行数据
onGridReady(params) {
this.gridOptions.api.setColumnDefs(this.createColumnDefs());
this.gridOptions.api.setRowData(this.rowData);
}
// 创建列定义
createColumnDefs() {
return [
// 定义各列的属性,如字段名、标题、编辑器等
];
}
// 获取已编辑的列
getEditedColumns() {
const editedColumns = [];
const allColumns = this.gridOptions.columnApi.getAllColumns();
allColumns.forEach(column => {
if (column.isCellEditable()) {
const colDef = column.getColDef();
const field = colDef.field;
const newValue = this.gridOptions.api.getValue(column, column.getRowNode());
editedColumns.push({ field, newValue });
}
});
return editedColumns;
}
}
<ag-grid-angular
style="width: 100%; height: 100%;"
class="ag-theme-alpine"
[gridOptions]="gridOptions"
(gridReady)="onGridReady($event)"
></ag-grid-angular>
使用以上步骤,就可以在Angular 6的ag-Grid中获取已编辑的列(包含数据)了。这样的功能在需要对用户进行数据更新或持久化时非常有用,比如保存用户对表格数据的修改或向后端提交修改后的数据。
推荐的腾讯云相关产品:腾讯云Serverless云函数(https://cloud.tencent.com/product/scf)
请注意,本回答中没有提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等品牌商。如需了解更多腾讯云的云计算产品,可访问腾讯云官网(https://cloud.tencent.com/)获取详细信息。
领取专属 10元无门槛券
手把手带您无忧上云