在 Ag-grid 的单元格编辑中使用“保存”和“取消”按钮

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) => {
                }
            };
        }

列定义是根据来自 Web api 的响应动态生成的。如果数据更改，则编辑停止时，我必须调用 web api 来更新数据，所有这些都按预期工作。但我想在网格上方添加一个保存和取消按钮，当用户点击保存然后调用 web api，点击取消按钮应该将网格数据恢复到旧值。我遇到了 api stopEditing(true) 但它没有用。您能否让我知道我如何实现此功能。

Answer 1

尝试设置stopEditingWhenGridLosesFocus为false。

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

点击保存。调用onSave函数，其定义为

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

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

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

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