angular-slickgrid，在选择编辑器更改事件上触发单元格编辑

Question

我正在使用 angular-silkgrid 和 angular 7。我正在使用内联编辑功能。我正在使用单选编辑器进行内联编辑。目前我想实现这个功能：

一旦用户单击可编辑字段，选择下拉列表将可见。从选择下拉列表中选择任何选项时，内联模式应该存在并且列值应该更新。

目前我需要点击其他字段退出内联模式（我想在选择选项选择时实现这一点）

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

我正在使用 angular-silkgrid 和 angular 7。我正在使用内联编辑功能。我正在使用单选编辑器进行内联编辑。目前我想实现这个功能：一旦用户单击可编辑字段，选择下拉列表将可见。从选择下拉列表中选择任何选项时，内联模式应该存在并且列值应该更新。目前我需要点击其他字段退出内联模式（我想在选择选项选择时实现这一点）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 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编辑器示例中，示例中有一个复选框auto commit，这是您需要在 Grid Options 中启用的设置this.gridOptions = {  autoEdit: true,  autoCommitEdit: true,}lib 将grid.getEditorLock().commitCurrentEdit()像 Ben 在他的回答中写的那样在内部调用，在 Angular-Slickgrid 中，您可以设置autoCommitEdit我添加的标志。