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

Question

根据该网站： 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();
  }

Answer 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定义为属性。呈现哪种类型的过滤器由用户提供的列配置来标识。

调用filterType时，网格不使用setFilterModel()。仅当您获得过滤器模型时，才提供此信息以供参考。如果您要进行服务器端过滤（在建立后端查询时可能使用过滤器类型），这将很有用。

现在让我们提出您的问题。您正在定义 自定义过滤器 ，因此您自己的职责可以自行定义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，其中显示了如何实现和使用它。