ag - grid + angular 4 自定义文本过滤器答案

【问题标题】：ag - grid + angular 4 custom text filterag - grid + angular 4 自定义文本过滤器
【发布时间】：2018-11-30 15:58:47
【问题描述】：

我有一个名为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"

【问题讨论】：

标签： ag-grid

【解决方案1】：

我认为实现这一点的最佳方法是使用内置的 ag-grid 方法，例如：

onFilterModified
onFilterChanged

并提供将过滤器值转换为真/假的逻辑。

或者，使用 javascript 在过滤器的应用按钮上添加事件侦听器（如果您使用应用按钮来应用过滤器），这将调用函数来转换您的值。

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

【讨论】：

我认为在filterParams中添加功能也可以，因为我对日期过滤器做了类似的事情并且它有效，此外，ag-grid还提供了filterParams的过滤自定义示例，我猜猜这里唯一错误的是我的逻辑

【解决方案2】：

尝试以下选项之一：

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

您可以尝试将其添加到您的列定义中：

filterValueGetter: params => params.data.accountVerified ? “是的” ： “没有”

【讨论】：