Question

我有一个名为Account Verification的列，该列返回值true或false。我将表格上的值格式化为Yes和No，但是在过滤列时，我仍然必须搜索true或false才能过滤列。我做了一个自定义过滤条件，但是没有用。有人有解决办法吗？

columns = [
    {
        headerName: 'Account Verification', field: 'accountVerified', filter: 'agTextColumnFilter',
        // Cell renderer 
        valueFormatter: (data) => {
            if (data.value === true) return 'Yes';
            else return 'No';
        },
        // Custom filter
        filterParams: {
            condition: (searchTerm, cellValue) => {
                if (searchTerm === 'Yes' || 'yes') {
                    return cellValue === true;
                } else if (searchTerm === 'No' || 'no') {
                    return cellValue === true;
                } else return cellValue === null;
            }
        }
    }
]

"ag-grid": "^18.0.1"

Answer 1

我认为实现此目标的最佳方法-使用内置的ag-grid方法，例如：

onFilterModified
onFilterChanged

并提供了逻辑，可以将过滤器值转换为true / false。

或者，使用javascript在过滤器的“应用”按钮上添加事件监听器（如果您正在使用“应用”按钮来应用过滤器），则将调用fucntion来转换您的值。

目前没有示例，但是我以相同的方式开发了用于过滤器验证（自定义）的解决方案。

Answer 2

尝试以下选项之一：

类似于列定义中的valueFormatter，也可以使用valueGetter。列定义中还提供了此方法（filterValueGetter（params）-函数或表达式。获取用于过滤目的的值。）
您可以在数据模型中添加一个新字段，该字段根据具有true / false的原始字段的值初始化为Yes / No。然后，在列定义中，可以使用此新字段在网格中显示。
或者，您可以编写自定义过滤器组件。请参阅ag-grid网站上的自定义Angular过滤器示例。

Answer 3

您可以在filterParams中使用TextFormatter来在过滤期间修改过滤器值：

filterParams: { textFormatter: (filterValue) => 'yourvalueformatter' }

https://www.ag-grid.com/javascript-grid-filter-text/#text-formatter

Answer 4

我遇到了同样的问题并检查了所有内置过滤器。最后，我能够按照以下步骤解决问题步骤：

安装 ag-grid-enterprise 包。 (npm install ag-grid-enterprise)
将过滤器设置为 agSetColumnFilter。（过滤器：'agSetColumnFilter'）
添加 filterParams 并指定您在列定义中使用的相同 valueFormatter

过滤器参数：{
valueFormatter: (数据) => {
if (data.value === true) 返回“是”；
否则返回“否”；
}
}

AG-网格+角度4自定义文本过滤器

4 个答案: