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

问题描述

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

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

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

这些是我的网格选项

{
            enableAutoResize: true,enableSorting: true,editable: true,autoEdit: true,autoCommitEdit: true,editCommandHandler : (item,column,editCommand) => EditHandler(item,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 方法触发并且我继续我的更改。

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

解决方法

编辑

以下有效，我对其进行了测试。我还添加了代码来保持最后一个事件名称被触发 (onClose/onOpen)，这样在打开选择下拉列表时就不会触发 editCommandHandler。您还应该使用最新版本的 Angular-Slickgrid 2.25.0，所有编辑器/过滤器现在都是公开的，因此可以更轻松地扩展它们（请参阅最新的 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 是否实际上是公开的，如果不是，则尝试扩展 Editors.singleSelect 和 Editors.multipleSelect

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

import { SelectEditor } from 'angular-slickgrid';

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

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

或 Editors.singleSelect 如果 SelectEditor 不公开

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 slickgrid