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

我之前做项目时刚好碰到过一模一样的需求——就是想让用户重复选择下拉框里的当前值时，也能触发后端API调用来更新日期。Angular SlickGrid默认的逻辑确实会跳过值未变化的编辑操作，但我们可以通过两种方式搞定这个问题：

方法一：自定义单选编辑器强制触发变更 #

SlickGrid的singleSelect编辑器默认会在save方法里对比新旧值，只有不同才会标记为变更。我们可以扩展这个编辑器，重写save方法，不管值有没有变化都返回变更状态。

首先定义一个自定义编辑器：

// 继承原有的singleSelect编辑器，重写save方法
class ForceChangeSingleSelectEditor extends Editors.singleSelect {
  save() {
    const newValue = this.getValue();
    // 直接把新值赋值给行数据（即使和旧值一样）
    this.item[this.column.field] = newValue;
    
    // 强制返回changed为true，让editCommandHandler触发
    return {
      changed: true,
      previousValue: this.previousValue,
      newValue: newValue
    };
  }
}

然后在你的列定义里替换掉原有的编辑器模型：

{ 
  id: 'status', 
  name: 'Status', 
  field: 'status', 
  filterable: true, 
  editor: { 
    collection: [{ value: 'progress', label: 'Progress' }, { value: 'new', label: 'New' }, { value: 'done', label: 'Done' }], 
    model: ForceChangeSingleSelectEditor // 用自定义编辑器替代原有的Editors.singleSelect
  } 
}

这种方法完全贴合SlickGrid的编辑生命周期，不需要额外监听事件，比较推荐。

方法二：监听CellChange事件手动触发更新 #

如果你不想自定义编辑器，也可以直接监听网格的onCellChange事件，手动调用你的EditHandler方法，哪怕值没有变化。

在网格初始化完成后添加事件监听：

// 假设你的网格实例是this.grid
this.grid.onCellChange.subscribe((e, args) => {
  const { item, column } = args;
  
  // 只针对status列做处理，避免影响其他列
  if (column.field === 'status') {
    // 手动构造editCommand对象，传入当前值作为新值和旧值
    const editCommand = {
      item,
      column,
      previousValue: item.status,
      newValue: item.status,
      commit: () => { /* 这里可以根据需要实现提交后的逻辑，比如更新UI */ },
      revert: () => { /* 如果需要回退逻辑可以在这里写 */ }
    };
    
    // 直接调用你的EditHandler方法
    EditHandler(item, column, editCommand);
  }
});

这个方法更直接，适合快速临时解决问题，但需要注意不要和默认的editCommandHandler逻辑冲突。

两种方法都能实现你要的效果，我自己当时用的是第一种，因为更符合SlickGrid的设计逻辑，后续维护起来也更清晰。

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