在 Ag-grid 的单元格编辑中使用 'save' 和 'cancel' 按钮

Question

我在我的 Angular 应用程序中使用 Ag-grid，并且网格中的数据是从 Web 服务填充的。我在这个网格中实现了单元格编辑，所以当我单击其中一列时，整行将是可编辑的，当我在网格外单击时停止编辑。以下是html和组件文件中的代码：

<ag-grid-angular #agGrid style="width: 100%; height: 600px;" class="ag-theme-balham left" [rowData]="rowData" [columnDefs]="columnDefs"
                            [gridOptions]="gridOptions" rowSelection="multiple" pagination=true (rowSelected)="onRowSelected($event)">
                        </ag-grid-angular>

component.ts 文件:

this.gridOptions = {
                defaultColDef: {
                    editable: (event: any) => {
                        if (this.isGridDataEditable) {
                            return true;
                        } else {
                            return false; // true/false based on params (or some other criteria) value
                        }
                    },
                    filter: true
                },
                singleClickEdit: true,
                stopEditingWhenGridLosesFocus: true,
                paginationPageSize: 20,
                editType: 'fullRow',
                onCellValueChanged: (event: any) => {
                },
                onRowValueChanged: (event: any) => {
                },
                onRowEditingStopped: (event: any) => {
                }
            };
        }

列定义是根据来自网络的响应动态生成的 api。如果数据发生变化，当编辑停止时，我必须调用网络 api 来更新数据，所有这一切都像 expected.But 我想在上面添加一个保存和取消按钮网格，当用户单击保存时才调用网络 api，单击取消按钮应将网格数据恢复为旧值。我遇到了 api stopEditing(true) 但它没有用。你能告诉我如何实现这个功能吗？

Answer 1

尝试将 stopEditingWhenGridLosesFocus 设置为 false。

然后在网格上方添加两个按钮，保存和取消。

点击保存。调用 onSave 定义为

的函数

onSave() {
  this.agGrid.api.stopEditing();
  this.callWebApi();
}

单击取消时，调用 onCancel 定义为

的函数

onCancel() {
  this.agGrid.api.stopEditing(true);
}

如果这就是您要找的，请告诉我。

在 Ag-grid 的单元格编辑中使用 'save' 和 'cancel' 按钮

Using 'save' and 'cancel' button in cell editing for Ag-grid

ag-grid

ag-grid-angular