Angular SlickGrid下拉框选同值时编辑处理器不触发的需求处理

我完全理解你的需求——即使选择下拉框里当前已选中的选项，也希望触发editCommandHandler来调用后端API更新修改日期对吧？默认情况下SlickGrid只会在值实际发生变化时触发编辑命令，不过我们有几个灵活的方案来实现这个需求：

方案一：自定义SingleSelect编辑器（推荐） #

最优雅的方式是扩展默认的singleSelect编辑器，强制它在选择相同值时也标记为值已变更，从而触发编辑命令处理器。

1. 创建自定义编辑器类 #

import { Editors, EditorArgs, Editor } from 'angular-slickgrid';

export class CustomSingleSelectEditor extends Editors.singleSelect {
  // 重写isValueChanged方法，强制返回true
  override isValueChanged(): boolean {
    // 不管值有没有变化，都告诉SlickGrid值已修改
    return true;
  }

  override applyValue(item: any, state: any): void {
    const fieldName = this.columnDef.field;
    // 确保值被设置（即使和当前值相同）
    item[fieldName] = state;
    
    // 提交编辑并更新行
    this.grid.getEditorLock().commitCurrentEdit();
    this.grid.updateRow(item);
  }
}

2. 在列定义中使用自定义编辑器 #

把原来的Editors.singleSelect替换成我们的自定义编辑器：

{ 
  id: 'status', 
  name: 'Status', 
  field: 'status', 
  filterable: true, 
  editor: { 
    collection: [{ value: 'progress', label: 'Progress' }, { value: 'new', label: 'New' }, { value: 'done', label: 'Done' }], 
    model: CustomSingleSelectEditor // 替换为自定义编辑器
  } 
}

这样配置后，无论你选择下拉框中的哪个选项（包括当前选中的），都会触发editCommandHandler，进而调用你的EditHandler去更新修改日期。

方案二：利用编辑器的onClose事件手动触发 #

如果你不想自定义编辑器，也可以在列定义的编辑器配置中添加onClose回调，手动触发编辑命令：

{ 
  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,
    onClose: (e: Event, args: EditorArgs) => {
      const item = args.item;
      const currentValue = item[args.column.field];
      
      // 手动构造编辑命令并触发你的处理函数
      EditHandler(item, args.column, {
        row: args.row,
        column: args.column,
        oldValue: currentValue,
        newValue: currentValue,
        editor: args.editor,
        cancel: () => {},
        commit: () => args.grid.updateRow(item)
      });
    }
  } 
}

方案三：监听网格的onCellEditEnd事件 #

另一种思路是直接监听网格的单元格编辑结束事件，当事件触发且是目标列时，不管值是否变化都调用你的处理函数：

// 在组件初始化或网格配置中添加事件监听
this.gridOptions.onCellEditEnd = (e: Event, args: any) => {
  // 只处理status列的编辑
  if (args.column.id === 'status') {
    // 调用你的EditHandler，传入当前值作为新旧值
    EditHandler(args.item, args.column, {
      row: args.row,
      column: args.column,
      oldValue: args.newValue,
      newValue: args.newValue,
      editor: args.editor,
      cancel: () => {},
      commit: () => this.grid.updateRow(args.item)
    });
  }
};

注意事项 #

• 因为你的网格配置中autoCommitEdit设为true，所以编辑会自动提交，无需额外手动调用commit（除非你需要自定义提交逻辑）。
• 自定义编辑器的方案最符合SlickGrid的设计模式，代码也更易于维护，推荐优先使用。

内容的提问来源于stack exchange，提问作者Akshita Agrawal