如何在 AG-Grid 中的多个列上设置 OR 过滤器?
How to set an OR filter on multiple columns in AG-Grid?
让我们在下面的例子中说,而不是 'Between 30 and 50' 的单选按钮,我想要一个使用 'OR' 逻辑过滤两列的单选按钮。
(我知道这是一个完全不切实际的示例,但为了学习概念)我想显示以下行:
- 国家=美国
或
- 年份 = 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
像这样更改在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
让我们在下面的例子中说,而不是 'Between 30 and 50' 的单选按钮,我想要一个使用 'OR' 逻辑过滤两列的单选按钮。
(我知道这是一个完全不切实际的示例,但为了学习概念)我想显示以下行:
- 国家=美国
或
- 年份 = 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
像这样更改在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