如何過濾Ag-Grid中的多個條件文本輸入？

Question

使用AG-電網企業V5.4.0

創建多個textFilter輸入例如：[包含] filterText和[中不含] filterText2就像Excel中的數據分析

但兩者FilterType2的和filterText是不確定單擊[應用過濾器]後

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

Answer 1

我相信你所要做的最好的做法是用​​。這使您可以完全控制過濾器疼痛，無論您是否在企業中。下面是需要方法爲每個自定義過濾器：

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

這是如何實現的一個例子「包括X，但不包括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。我將過濾器放在運動員專欄上，但是DoubleFilter可以應用到任何專欄中。

編輯：

我意識到你問在你的問題中比較通用的雙過濾器「包括和排除」爲例。這是一個plunker，它有一個更通用的雙重過濾器。