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

Question

使用 ag-grid-enterprise v5.4.0

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

但单击 [应用过滤器]

后 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
};

下面是如何实现 "Includes x but Excludes y" 过滤器的示例：

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 可以在创建后应用于任何列。

编辑：

我意识到你在你的问题中要求一个相当通用的双过滤器，例如 "Includes and Excludes"。这是一个 plunker，它有一个更通用的双重过滤器。

Answer 2

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

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

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

How to filter with multiple condition text input in Ag-Grid?

ag-grid