javascript - 如何在 AG-Grid 中的多个列上设置 OR 过滤器?
问题描述
假设在下面的示例中,我想要一个用于使用“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
解决方案
只需像这样更改在 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
推荐阅读
- excel - VBA - 使用范围函数从一个工作表复制并粘贴到另一个工作表
- python - 是否可以从其他人的不和谐服务器中获取消息?
- laravel - Laravel eloquent 得到一个二维数组的数组
- server-side-rendering - 使用 Svelte 进行动态服务器端渲染。如何在客户身上补水?
- android - Xamarin Forms 允许在播放视频时从 Android 上的另一个应用程序播放音乐
- database - 迁移 wordpress 网站并使用插件更改 URL 后链接不起作用
- python - 在 Python 中,我无法使用 PIL 正确打开一些 png 图像
- docker - Docker Windows 容器无法解析 host.docker.internal
- facebook - 2021 年如何在 Facebook 上获得 URL 赞
- c# - JSON.NET 通过填充来覆盖字典的值