angular-slickgrid，觸發 select 編輯器更改事件上的單元格編輯

Question

我正在使用帶有 angular 7 的 angular-silkgrid。我正在使用內聯編輯功能。 我正在使用單個 select 編輯器進行內聯編輯。 目前我想實現這個功能：

一旦用戶單擊可編輯字段，select 下拉將可見。在 select 上，select 下拉列表中的任何選項都應該存在並且應該更新值列。

目前我需要點擊其他字段退出內聯模式（我想在 select 選項選擇上實現這一點）

 editor: { // display checkmark icon when True enableRenderHtml: true, // tslint:disable-next-line:max-line-length collection: [{ value: 1, label: 'Sucessful' }, { value: 2, label: 'Unsucessful' }], model: Editors.singleSelect, // CustomSelectEditor elementOptions: { autoAdjustDropPosition: false, onClick: (event, rr) => { // here i want to write some code which can trigger to grid to start update } } }

Answer 1

謝謝大家的回答。 我已經解決了我的問題如下：

   editor: {
      enableRenderHtml: true,
      collection: [{ value: CCLStaus.Sucessfull, label: 'Sucessful' }, { value: CCLStaus.UnSucessfull, label: 'Unsucessful' }],
      model: Editors.singleSelect,// CustomSelectEditor
      elementOptions: {
        onClick: (event) => {
          const updateItem = this.angularSilkGrid.gridService.getDataItemByRowIndex(this.rowInEditMode);
          updateItem.status = +event.value;
          this.angularSilkGrid.gridService.updateItem(updateItem, { highlightRow: false });
          this.angularSilkGrid.gridService.renderGrid();
        }
      }
    }

Answer 2

一般來說，

grid.getEditorLock().commitCurrentEdit()

將提交並關閉編輯器。 此外，任何

grid.navigateRight()
grid.navigateLeft()
grid.navigateDown()
grid.navigateUp()
grid.navigateNext()
grid.navigatePrev()

將優雅地提交和退出。 在select2編輯器中，您會注意到：

    this.init = function () {
      ...

      // Set focus back to select2 element on closing.
      $input.on('select2:close', function (e) {
        if ((e.params.originalSelect2Event && e.params.originalSelect2Event.data) 
        || e.params.key === 9) {
          // item was selected with ENTER or no selection with TAB
          args.grid.navigateNext();
        } else {
          // closed with no selection
          setTimeout(function () {
            $input.select2('focus');
          }, 100);
        }
      });
    };

    this.destroy = function () {
        $input.select2('destroy');
        $input.remove();
    };

，注意args.grid.navigateNext()將提交並關閉編輯器，包括在適當的時間調用destroy()方法。

Answer 3

在 Angular-Slickgrid Editor Example中，示例中有一個復選框可以auto commit ，這是您需要在 Grid Options 中啟用的設置

this.gridOptions = {
  autoEdit: true,
  autoCommitEdit: true,
}

該庫將在內部調用grid.getEditorLock().commitCurrentEdit()就像 Ben 在他的回答中所寫的那樣，在 Angular-Slickgrid 中，您只需設置我添加的autoCommitEdit標志。