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我添加的标志。