Question

使用ag-grid-enterprise v5.4.0

创建多个textFilter输入ex：[CONTAINS] filterText和[NOT CONTAIN] filterText2就像Excel数据分析一样

但点击[APPLY FILTER]

后，filterType2和filterText都是未定义

https://embed.plnkr.co/4nAjGKmChqJiRcqz6E2n/

Answer 1

我相信你要做的事情最好用Filter Component来实现。无论您是否在企业，这都可以让您完全控制过滤器的痛苦。以下是每个自定义过滤器的必需方法：

function CustomFilter() {}

CustomFilter.prototype.init = function (params) {
    //Put any initial functions you need here (such as setting values to null)
};

CustomFilter.prototype.getGui = function () {
    //return a string of HTML or a DOM element/node
};

CustomFilter.prototype.doesFilterPass = function (params) {
    //Logic for your custom Filter
    //return True if the row should display, false otherwise
};

CustomFilter.prototype.isFilterActive = function () {
    //logic for displaying the filter icon in the header
};

CustomFilter.prototype.getModel = function() {
    //store the filter state
};

CustomFilter.prototype.setModel = function(model) {
    //restore the filter state here
};

以下是如何实现＆＃34;包含x但排除y＆＃34;过滤器：

function DoubleFilter() {
}

DoubleFilter.prototype.init = function (params) {
    this.valueGetter = params.valueGetter;
    this.filterText = null;
    this.setupGui(params);
};

// not called by ag-Grid, just for us to help setup
DoubleFilter.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>' +
        'Include: <div><input style="margin: 4px 0px 4px 0px;" type="text" id="includesText" placeholder="Includes..."/></div>' +
        'Exclude: <div><input style="margin: 4px 0px 4px 0px;" type="text" id="excludesText" placeholder="Excludes..."/></div>' +
        '</div>';

    // add listeners to both text fields
    this.eIncludesText = this.gui.querySelector('#includesText');
    this.eIncludesText.addEventListener("changed", listener);
    this.eIncludesText.addEventListener("paste", listener);
    this.eIncludesText.addEventListener("input", listener);
    // IE doesn't fire changed for special keys (eg delete, backspace), so need to
    // listen for this further ones
    this.eIncludesText.addEventListener("keydown", listener);
    this.eIncludesText.addEventListener("keyup", listener);

    this.eExcludesText = this.gui.querySelector('#excludesText');
    this.eExcludesText.addEventListener("changed", listener2);
    this.eExcludesText.addEventListener("paste", listener2);
    this.eExcludesText.addEventListener("input", listener2);
    // IE doesn't fire changed for special keys (eg delete, backspace), so need to
    // listen for this further ones
    this.eExcludesText.addEventListener("keydown", listener2);
    this.eExcludesText.addEventListener("keyup", listener2);

    var that = this;
    function listener(event) {
        that.includesText = event.target.value;
        params.filterChangedCallback();
    }
    function listener2(event) {
        that.excludesText = event.target.value;
        params.filterChangedCallback();
    }
};

DoubleFilter.prototype.getGui = function () {
    return this.gui;
};

DoubleFilter.prototype.doesFilterPass = function (params) {
    var passed = true;
    var valueGetter = this.valueGetter;
    var include = this.includesText;
    var exclude = this.excludesText;
    var value = valueGetter(params).toString().toLowerCase();

    return value.indexOf(include) >= 0 && (value.indexOf(exclude) < 0 || exclude == '') ;
};

DoubleFilter.prototype.isFilterActive = function () {
    return (this.includesText !== null && this.includesText !== undefined && this.includesText !== '')
        || (this.excludesText !== null && this.excludesText !== undefined && this.excludesText !== '');
};

DoubleFilter.prototype.getModel = function() {
    var model = {
        includes: this.includesText.value,
        excludes: this.excludesText.value
    };
    return model;
};

DoubleFilter.prototype.setModel = function(model) {
    this.eIncludesText.value = model.includes;
    this.eExcludesText.value = model.excludes;
};

这是modified plunker。我将过滤器放在Athlete列上，但DoubleFilter可以在创建后应用于任何列。

修改

我意识到你要求在＃34;包含和排除＆＃34;举个例子。这是plunker，它具有更通用的双重过滤器。

Answer 2

ag-Grid现在默认支持此行为，版本为18.0.0。

https://www.ag-grid.com/ag-grid-changelog/?fixVersion=18.0.0

如何使用Ag-Grid中的多个条件文本输入进行过滤？

2 个答案: