如何限制 SlickGrid 在单击或更改复合过滤器时拨打 API 电话？

Question

我有一个 SlickGrid 表，其中有复合过滤器，目前当我尝试更改复合过滤器（假设从等于到小于）时，它会调用 API。 我不想拨打 API 电话，我该如何实现？

我在 slickgrid 文档中搜索，但找不到任何属性（如果可用）。

图片

Answer 1

请注意，我是 Angular-Slickgrid 的作者

因此，我查看了您遇到的问题，这似乎是一个值得研究的有效问题，我同意对于像复合日期过滤器运算符这样的某些过滤器，我们不应该立即查询，即在更改运算符下拉列表之后不提供日期。 因此，出于这个原因，我添加了一个新的网格选项skipCompoundOperatorFilterWithNullInput ，这将避免在我们第一次更改运算符下拉列表而不提供输入日期时触发过滤器更改（它也将避免在实施时查询后端）。

请注意，此新选项仅适用于 Angular-Slickgrid v5.1.0 + （通过此PR ，现在支持此功能，并且默认情况下只会在复合日期过滤器上启用（任何其他过滤器都必须明确启用此新标志通过网格选项或通过列定义）。

如果我无法升级到5.1.0怎么办？ 还有其他处理方法吗？

是的，虽然这只是涉及到处理这个问题，但它需要您做更多的工作。 您需要知道的信息是，几乎来自 Angular-Slickgrid 和 Slickgrid-Universal 的每一段代码都protected TypeScript 类和函数，这意味着您可以简单地使用 TypeScript 来extends它们中的任何一个。 让我们以CompoundDateFilter class 为例，我们可以通过这种方式扩展它以跳过没有提供日期 ( this._currentDate ) 的回调触发

import { CompoundDateFilter, OperatorString } from '@slickgrid-universal/common';

export class CustomCompoundDateFilter extends CompoundDateFilter {
  protected onTriggerEvent(e: Event | undefined) {
    if (this._clearFilterTriggered) {
      this.callback(e, { columnDef: this.columnDef, clearFilterTriggered: this._clearFilterTriggered, shouldTriggerQuery: this._shouldTriggerQuery });
      this._filterElm.classList.remove('filled');
    } else {
      const selectedOperator = this._selectOperatorElm.value as OperatorString;
      (this._currentValue) ? this._filterElm.classList.add('filled') : this._filterElm.classList.remove('filled');

      // -- NEW CODE BELOW -- (to skip triggering callback on undefined date)
      // when changing compound operator, we don't want to trigger the filter callback unless the date input is also provided
      if (this._currentDate !== undefined) {
        this.callback(e, { columnDef: this.columnDef, searchTerms: (this._currentValue ? [this._currentValue] : null), operator: selectedOperator || '', shouldTriggerQuery: this._shouldTriggerQuery });
      }
    }

    this._clearFilterTriggered = false;
    this._shouldTriggerQuery = true;
  }
}

然后在您的列定义中使用这个新的自定义过滤器 class

import { CustomCompoundDateFilter } from './custom-compoundDateFilter';

initGrid() {
  this.columnDefinitions = [{
    id: 'start', name: 'Start', field: 'start', 
    filterable: true, filter: { model: CustomCompoundDateFilter },
  }];
}

好了，下面是自从我更改运算符以来它正在工作的证明，正如您在下面看到的那样，此操作不再导致返回 0 行。 但是，如果我做了相反的操作，即输入日期但没有运算符，它将执行过滤，因为“无运算符”默认为“等于”运算符。