Обновите значения ячеек ag-grid после массового редактирования - PullRequest
Новая
       5

Обновите значения ячеек ag-grid после массового редактирования

0 голосов
/ 03 марта 2020

Я пытаюсь обновить ag-grid после массового изменения значений ячеек вместо одного значения за раз. Я знаю, что уже есть метод (cellvaluechanged), который дает вам, какое значение было изменено вместе с api и colDef. Я также попробовал pasteEnd из ag-grid, но это просто работает для вставки, что если пользователь просто редактирует значение ячейки без вставки копии. То, что я пытаюсь сделать, - это иметь метод, который будет вызываться через секунду или две, собирая все значения, измененные в ag-grid, чтобы избежать нескольких раундов до бэкенда. Возможное расширение этого вопроса: Как запустить метод после редактирования значения ячейки в 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 file

PS Я знаю, что метод все равно будет вызывать backend несколько раз, даже с таймаутом. Это было просто для того, чтобы показать, что я пытался сделать. 

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

Очень помогло бы, если бы кто-нибудь знал, как выполнить массовую загрузку значений всей ячейки, измененных через секунду или две, вместо отправки каждого измененного значения. Пожалуйста, совет.

Спасибо

1 Ответ

0 голосов
/ 04 марта 2020

Я смог использовать интервал на основе комментариев. Когда происходит изменение значения ячейки, происходит событие onCellValueChanged, из которого я получаю измененное значение, идентификатор строки вместе с фактическим именем поля. setTimeout () для значений изменяется только в случае, если есть 10-20 значений, вставленных вместе, чтобы избежать обратных вызовов вперед и назад.

Update CellValue затем устанавливает интервал (500).

На последнем шаге 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

...