Angular slickgrid 编辑处理程序不会在从下拉列表中选择相同的值时触发

Question

我在 angular slickgrid 中有一个要求，我想用相同的选项编辑行，结果将更新进行更新的日期。

我实际上做的是在 table 中进行任何更改时在编辑命令处理程序上调用 API，但是当我从下拉列表中单击相同的选项时，处理程序不会被触发（这是有效的，因为没有进行任何更改，但出于我的目的，我需要触发它）

所以我的代码看起来像这样：

这些是我的网格选项

{
            enableAutoResize: true,
            enableSorting: true,
            editable: true,
            autoEdit: true,
            autoCommitEdit: true,
            editCommandHandler : (item, column, editCommand) => EditHandler(item, column, editCommand)//This is my EditHandler method which gets triggered and calls an API in backend
}

这是我的专栏定义

{
    id: 'status', name: 'Status', field: 'status', 
    filterable: true,
    editor: {
      collection: [{ value: 'progress', label: 'Progress' }, { value: 'new', label: 'New' }, { value: 'done', label: 'Done' }],
      model: Editors.singleSelect
    }
  }

现在假设如果一行在状态列中包含 Progress，当我从下拉列表中将其更改为 New 时，我的 EditHandler 方法触发，我继续进行更改。

但是我想要的是再次点击Progress并且想要触发EditHandler方法并调用API用相同的状态更新日期

Answer 1

编辑

下面的工作，我测试了它。我还添加了代码以保持触发的最后一个事件名称 (onClose/onOpen)，这样您就不会在打开 select 下拉菜单时触发 editCommandHandler。您还应该使用最新版本的 Angular-Slickgrid 版本 2.25.0，所有 Editors/Filters 现在都是 Public，因此更容易扩展它们（请参阅最新的 Release Note ).

export class CustomSelectEditor extends SingleSelectEditor {
  private lastEventName = '';

  constructor(args) {
    super(args);

    // retrieve the options that were provided to multipleSelect.JS
    // we will override the onClose/onOpen to get last event name triggered
    // Note: make sure that the onClose is still calling the this.save() else nothing will work
    const libOptions = this.editorDomElement.multipleSelect('getOptions');
    libOptions.onClose = () => {
      this.lastEventName = 'onClose';
      this.save();
    };
    libOptions.onOpen = () => {
      this.lastEventName = 'onOpen';
    }
    this.editorDomElement.multipleSelect('refreshOptions', libOptions);
  }

  isValueChanged(): boolean {
    // return true only when it's the onClose event to fire the editCommandHandler
    if (this.lastEventName === 'onClose') {
      return true;
    }

    // but keep previous logic when it's not the onClose event
    if (this.isMultipleSelect) {
      return !charArraysEqual(this.$editorElm.val(), this.originalValue);
    }
    return this.$editorElm.val() !== this.originalValue;
  }
}

所有编辑器的编写方式都是为了避免在没有任何更改时触发事件，如果您真的希望更改该行为，那么您可以扩展 SelectEditor 并覆盖 isValueChanged() 函数。

请注意，我没有测试下面的代码，但它应该可以工作，我不确定 SelectEditor 是否实际上是 public，如果不是，请尝试扩展 Editors.singleSelect和 Editors.multipleSelect

首先尝试直接扩展 SelectEditor（我认为它们目前不是 public，那行不通，但我可能会在未来的版本中更改它）

import { SelectEditor } from 'angular-slickgrid';

export class CustomSelectEditor extends SelectEditor {
  constructor() {
    super();
  }

  isValueChanged(): boolean {
    // your custom logic
  }
}

或Editors.singleSelect如果SelectEditorpublic不可用

import { Editors } from 'angular-slickgrid';

export class CustomSelectEditor extends Editors.inputText {
  constructor() {
    super();
  }

  isValueChanged(): boolean {
    // your custom logic
  }
}

然后在自定义编辑器中的列定义中使用它

{
    id: 'status', name: 'Status', field: 'status', 
    filterable: true,
    editor: {
      collection: [{ value: 'progress', label: 'Progress' }, { value: 'new', label: 'New' }, { value: 'done', label: 'Done' }],
      model: CustomSelectEditor 
    }
}

Angular slickgrid 编辑处理程序不会在从下拉列表中选择相同的值时触发

Angular slickgrid edit handler does not trigger on selecting same value from dropdown

slickgrid

angular-slickgrid