如何解决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
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。