批量编辑后更新 ag-grid 单元格值答案

【问题标题】：Update ag-grid cell values after bulk editing批量编辑后更新 ag-grid 单元格值
【发布时间】：2020-06-15 07:20:31
【问题描述】：

我正在尝试更新 ag-grid，在单元格值批量更改而不是一次更改一个值之后。我知道已经有一种方法（cellvaluechanged）可以为您提供与 api 和 colDef 一起更改的值。我也尝试了来自 ag-grid 的 pasteEnd 但这仅适用于粘贴，如果用户只是编辑单元格值而不复制粘贴怎么办。我想要做的是有一个方法会在一两秒后被调用，抓取所有在 ag-grid 中更改的值，以避免多轮到后端。这个问题的可能扩展：How to launch a method after a cell value has been edited in ag-grid?

HTML

<ag-grid-angular [ngStyle]="{'height.px': innerHeight}" #agGridLevel class="ag-theme-balham"
                    [rowData]="rowData" [gridOptions]="gridOptions" [defaultColDef]="defaultColDef" [sideBar]="sideBar"
                    [columnDefs]="columnDefs" [excelStyles]="excelStyles" [rowSelection]="'multiple'"
                    (selectionChanged)="onSelectionChanged()" (rowClicked)="onRowClicked($event)"
                    [suppressCopyRowsToClipboard]="true"
                    [enableRangeSelection]="true"
                    (cellValueChanged)="onCellValueChanged($event)"
                    (gridReady)="onGridReady($event)">
                    >
                </ag-grid-angular>

component.ts 文件

附：我知道即使超时，该方法仍会多次调用后端。这只是为了展示我想要做什么。

onCellValueChanged(params) {
    console.log("Callback onCellValueChanged:", params);
    if (params.newValue) {
      this.changedValue.push({
        field: params.colDef.field,
        newValue: params.newValue.trim(),
        id: params.data.id
      });
      setTimeout(() => {
        this.updateCellValuesInDb(this.changedValue)
      }, 1000);
    }
  }

如果有人知道如何批量加载在一两秒后更改的整个单元格值，而不是发送每个更改的值，那将有很大帮助。请指教。

谢谢

【问题讨论】：

我不得不处理类似的情况，但对我有帮助的是有一个按钮供用户接受批量更新，所以也许你可以妥协并创建一个类似的按钮，一旦它点击你可以做this.updateCellValuesInDb。
感谢您的评论。我不愿意添加按钮的唯一原因是它会像复制粘贴一样带走 ag-grid excel 的美感。我正在寻找更多从 ag-grid 开箱即用的方法/事件。
只使用您当前的方法（收集内存中的更改），但只允许使用debounce 或throttle 最多每隔“一两秒”调用一次updateCellValuesInDb。跨度>

标签： angular ag-grid ag-grid-angular

【解决方案1】：

我能够使用基于 cmets 的 Interval。发生的情况是，一旦单元格值更改，就会触发 onCellValueChanged 事件，从中我得到更改的值、行的 Id 以及实际的字段名称。值上的 setTimeout() 更改以防万一将 10-20 个值粘贴在一起以避免来回后端调用。

更新 CellValue 然后设置间隔 (500)。

在最后一步中，在组件中声明为 false 的 isCellValueUpdated 布尔值将处理对后端的多次调用，并且每次实际请求多条记录时都会进行一次批量加载。

    onCellValueChanged(params) {
        console.log('Callback onCellValueChanged:', params);
        if (params.newValue) {
          this.changedValue.push({
            field: params.colDef.field,
            newValue: params.newValue.trim(),
            id: params.data.id
          });
          setTimeout(() => {
            this.updateCellValues(this.changedValue);
          }, 1000);
        }
      }
      private updateCellValues(values: IGridChangedValues[]) {
        const changeBooleanAfterValuesChange = interval(500);
        this.updateDb({ values, changeBooleanAfterValuesChange });
      }


      private updateDb(
    { values, changeBooleanAfterValuesChange }:
      { values: IGridChangedValues[]; changeBooleanAfterValuesChange: Observable<number>; }) {
    if (!this.isCellValueUpdated) {
      this.isCellValueUpdated = true;
      this._studyLevelService.updateCellValuesInDb(values).pipe(takeUntil(this.unsubscribe$)).subscribe(
        (result: boolean) => {
          if (result) {
          } else {
            this._dialogs.alert(new AlertDialogOptions(
              'Error',
              'Error Updating values'));
          }
          changeBooleanAfterValuesChange.pipe(takeUntil(this.unsubscribe$)).subscribe(
            () => this.isCellValueUpdated = false
          )
        })
    }
  }

我希望可能有更好的解决方案来避免间隔和超时，但我认为这是目前可用于 ag-grid 的最佳技术

【讨论】：