Ag-grid 自定义过滤器和服务器端过滤器，类型未定义答案

【问题标题】：Ag-grid custom filter and server side filter, type is undefinedAg-grid 自定义过滤器和服务器端过滤器，类型未定义
【发布时间】：2021-02-13 00:32:26
【问题描述】：

根据本网站： enter link description here

我构建了自定义过滤器，但我想将它作为过滤器服务器端。当请求设置为服务器时，我有来自自定义过滤器的 columnName，但我没有类型：

 function whereSql(request) {
    debugger;
    var whereParts = [];
    var filterModel = request.filterModel;

    if (filterModel) {
      Object.keys(filterModel).forEach(function (key) {
        debugger;
        var item = filterModel[key];

在这一行中， var item = filterModel[key]; 键未定义，我只能看到使用了我的 TxtCustomFilter 的列名。但类型未定义。

我的自定义过滤器如下所示：

function TxtCustomFilter() {
}

TxtCustomFilter.prototype.init = function (params) {
  this.valueGetter = params.valueGetter;

  this.setupGui(params);
};

// not called by ag-Grid, just for us to help setup
TxtCustomFilter.prototype.setupGui = function (params) {
  this.gui = document.createElement('div');
  this.gui.innerHTML =
    '<div style="padding: 4px; width: 200px;">' +
  //  '<div style="font-weight: bold;">Custom Athlete Filter</div>' +
      '<div><input style="margin: 4px 0px 4px 0px;" type="text" id="filterText" placeholder="Full name search..."/></div>' +

...

this.filterText = this.gui.querySelector('#filterText');
  this.filterText.addEventListener("changed", listener);
  this.filterText.addEventListener("paste", listener);
  this.filterText.addEventListener("input", listener);

var that = this;

  function listener(event) {
    debugger;
   // that.filterText = event.target.value;
    params.filterChangedCallback();
  }

【问题讨论】：

标签： angular ag-grid ag-grid-angular

【解决方案1】：

过滤器的接口（内置）具有以下结构

// text filter uses this filter model
interface TextFilterModel {
    // always 'text' for text filter
    filterType: string;

    // one of the filter options, e.g. 'equals'
    type: string;

    // the text value associated with the filter.
    // it's optional as custom filters may not
    // have a text value
    filter?: string;
}


// number filter uses this filter model
interface NumberFilterModel {
    // always 'number' for number filter
    filterType: string;

    // one of the filter options, e.g. 'equals'
    type: string;

    // the number value(s) associated with the filter.
    // custom filters can have no values (hence both are optional).
    // range filter has two values (from and to).
    filter?: number;
    filterTo?: number;
}

... same applies to other inbuilt filters.

如您所见，Ag-Grid 将filtertype 定义为属性。渲染哪种类型的过滤器由用户提供的列配置标识。

当您调用setFilterModel() 时，网格不使用filterType。它仅在您获得过滤器模型时提供信息。如果您正在执行服务器端过滤，这很有用，其中过滤器类型可用于构建后端查询。

现在让我们来回答您的问题。您正在定义一个自定义过滤器，因此您有责任自行定义 filtertype 属性，因为 AG-Grid 不参与自定义过滤器组件.

TxtCustomFilter.prototype.init = function(params) {
    this.valueGetter = params.valueGetter;
    this.filterText = null;
    this.filterType = 'custom' // define your fitlertype property
    this.setupGui(params);
};
TxtCustomFilter.prototype.getModel = function() {
    return { value: this.filterText.value,
    filtertype : this.filterType };
};

这是一个简单的demo，它展示了如何实现和使用它。

【讨论】：