如何限制 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 行。 但是，如果我做了相反的操作，即輸入日期但沒有運算符，它將執行過濾，因為“無運算符”默認為“等於”運算符。