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

时间:2019-07-16 13:07:42

标签: javascript filtering ag-grid

让我们在下面的示例中说,我不想有一个单选按钮来表示“介于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;
    }
}

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

1 个答案:

答案 0 :(得分:0)

只需更改在dosExternalFilterPass方法中检查的条件,即可。

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

这是一个小家伙或正在运行的演示: https://plnkr.co/edit/QfJq59MJA7FmiAg4C4Zb?p=preview