Question

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

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

当前我需要单击其他字段以退出串联模式（我想在选择选项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复选框，这是您需要在“网格选项”中启用的设置

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

lib将像Ben在其答案中所写的那样内部调用grid.getEditorLock().commitCurrentEdit()，在Angular-Slickgrid中，您可以仅设置我添加的autoCommitEdit标志。

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

3 个答案: