如何限制SlickGrid在修改复合筛选器时触发API调用？

要禁止修改筛选操作符（比如从“等于”改“小于”）时触发API调用，核心思路是拦截筛选变化事件，区分操作符修改和值修改，仅在值变化/筛选条件增删时执行API，具体实现步骤如下：

1. 保存筛选状态快照 #

定义变量存储上一次的筛选条件状态，用于和当前状态对比：

let lastFilterState = {};

2. 监听筛选变化事件 #

绑定SlickGrid的onFilterChanged事件，在事件回调中判断变化类型：

grid.onFilterChanged.subscribe((e, args) => {
  const currentFilter = args.grid.getFilter();
  // 判断是否仅操作符发生变化
  const isOnlyOperatorChange = checkOperatorOnlyChange(lastFilterState, currentFilter);

  // 仅当不是仅操作符变化时，才触发API调用
  if (!isOnlyOperatorChange) {
    // 替换成你的API调用逻辑
    fetch('/api/data', {
      method: 'POST',
      body: JSON.stringify(currentFilter)
    });
  }

  // 更新筛选状态快照
  lastFilterState = {...currentFilter};
});

3. 实现操作符变化判断函数 #

编写函数对比新旧筛选状态，判断是否仅操作符修改：

function checkOperatorOnlyChange(oldFilter, newFilter) {
  // 筛选条件数量不一致，说明有增删，直接返回false
  const oldFields = Object.keys(oldFilter);
  const newFields = Object.keys(newFilter);
  if (oldFields.length !== newFields.length || !oldFields.every(f => newFields.includes(f))) {
    return false;
  }

  // 遍历每个字段的筛选条件，对比值和操作符
  for (const field of oldFields) {
    const oldCond = oldFilter[field];
    const newCond = newFilter[field];
    // 如果值发生变化，说明不是仅操作符修改
    if (oldCond.value !== newCond.value) {
      return false;
    }
  }

  // 所有字段值未变，仅操作符可能变化
  return true;
}

特殊场景处理 #

如果使用的是第三方复合筛选器组件（如SlickCompositeFilter），可以直接监听组件的onChange事件，精准判断单字段的变化：

// 假设筛选器组件实例为compositeFilter
compositeFilter.onChange.subscribe((e, args) => {
  const { oldCondition, newCondition } = args;
  // 仅操作符变化、值未变时，跳过API调用
  if (oldCondition.value === newCondition.value && oldCondition.operator !== newCondition.operator) {
    return;
  }
  // 其他情况触发API
  fetchData(compositeFilter.getFilters());
});

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