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

Question

Let's say in the example below, instead of having a radio button for 'Between 30 and 50', I'd like to have a radio button for filtering two columns using 'OR' logic.

---

(I know this is a completely unrealistic example but for the sake of learning concepts) I'd like to display the rows where:

• Country = United States

Or

• Year = 2012

So for example, the following rows would be displayed:

• Country = United States and Year = 2003
• Country = Canada and Year = 2012
• Country = United States and Year = 2012

So in essence, any given row only needs to fulfill one of the two requirements above.

---

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

---

The full example of the plunker is here: https://plnkr.co/edit/cJaktv86hhptsP3pYQf5?p=preview

Answer 1

Just change the condition checked in the doesExternalFilterPass method like so.

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

Here's a plunker or the working demo: https://plnkr.co/edit/QfJq59MJA7FmiAg4C4Zb?p=preview