如何在 AG-Grid 中的多个列上设置 OR 过滤器？答案

【问题标题】：How to set an OR filter on multiple columns in AG-Grid?如何在 AG-Grid 中的多个列上设置 OR 过滤器？
【发布时间】：2019-11-25 05:36:22
【问题描述】：

假设在下面的示例中，我想要一个用于使用“OR”逻辑过滤两列的单选按钮，而不是“30 到 50 之间”的单选按钮。

（我知道这是一个完全不切实际的例子，但为了学习概念）我想显示以下行：

国家 = 美国

或者

年份 = 2012

例如，将显示以下行：

国家 = 美国，年份 = 2003
国家 = 加拿大，年份 = 2012
国家 = 美国，年份 = 2012

所以本质上，任何给定的行只需要满足上述两个要求之一。

var gridOptions = {
    defaultColDef: {
        filter: true
    },
    columnDefs: columnDefs,
    rowData: null,
    animateRows: true,
    isExternalFilterPresent: isExternalFilterPresent,
    doesExternalFilterPass: doesExternalFilterPass
};

var ageType = 'everyone';

    function isExternalFilterPresent() {
    // if ageType is not everyone, then we are filtering
    console.log('test');
    return ageType != 'everyone';
}

function doesExternalFilterPass(node) {

    console.log(node.data);
    switch (ageType) {
        case 'below30': return node.data.age < 30;
        case 'between30and50': return node.data.age >= 30 && node.data.age <= 50;
        case 'above50': return node.data.age > 50;
        case 'dateAfter2008': return asDate(node.data.date) > new 
Date(2008,1,1);
        default: return true;
    }
}

plunker 的完整示例在这里：https://plnkr.co/edit/cJaktv86hhptsP3pYQf5?p=preview

【问题讨论】：

标签： javascript filtering ag-grid

【解决方案1】：

只需像这样更改在doesExternalFilterPass方法中检查的条件。

function doesExternalFilterPass(node) {
  console.log(node);
    switch (ageType) {
        case 'below30': return node.data.age < 30;
        case 'between30and50': return node.data.year === 2012 || node.data.country === 'United States';
        case 'above50': return node.data.age > 50;
        case 'dateAfter2008': return asDate(node.data.date) > new Date(2008,1,1);
        default: return true;
    }
}

这是一个 plunker 或工作演示： https://plnkr.co/edit/QfJq59MJA7FmiAg4C4Zb?p=preview

【讨论】：