Question

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

$('#setup_timeline').roadmap(events, {
        eventsPerSlide: 5,
        slide: 1,
        prevArrow: '<i class="icon-arrow-left15"></i>',
        nextArrow: '<i class="icon-arrow-right15"></i>'
    });

component.ts文件：

<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>

基于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);
}

让我知道这是否是您想要的。

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

1 个答案: