0

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

我实际上做的是在表中进行任何更改时在编辑命令处理程序上调用 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

4

1 回答 1

0

编辑

以下作品，我对其进行了测试。我还添加了代码以保持最后一个事件名称被触发（onClose/onOpen），这样您在打开选择下拉菜单时就不会触发 editCommandHandler。您还应该使用最新版本的 Angular-Slickgrid 版本2.25.0，所有编辑器/过滤器现在都是公共的，因此更容易扩展它们（请参阅最新版本说明）。

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 
    }
}
于 2020-12-23T05:54:06.623 回答