如何在ag-grid中创建布尔过滤器组件？

Question

令人遗憾的是ag-grid没有提供简单的布尔过滤组件。它们有数字过滤器、文本过滤器、日期过滤器组件，只是没有布尔过滤器:(我们正在使用视口行模型并有一列显示布尔值、真/假，我们想要一个简单的过滤器来显示真/假我们可以选择然后过滤。我知道 set-filter 与此最接近，并且我尝试过，在对服务器进行一些假设后，它在一定程度上有效，但对于这个简单的用例来说，它似乎不够干净。此外，设置过滤器定制也存在一些问题：

1. 即使我在 set-filter 中提供“值”为 [true, false]，ag-grid 也会将它们视为字符串 ['true', 'false']，这有点麻烦。

2. Set-filter 在过滤器中提供了多选复选框，这对于选择布尔值来说根本不理想，就像同时选择 true/false 然后进行过滤是没有意义的。它应该是单选单选按钮或类似的东西。

3. 我们无法将filterType或任何内容设置为filterParams的一部分，就像现有的数字/文本过滤器一样。从服务器实现的角度来看，这很重要，因为这样我就可以在 ag-grid 中设置

   filterType=boolean

   ，然后服务器就能干净地处理。

因此，我们想问有没有人实现过这种简单的布尔过滤器组件？请随时直接查看任何有用的文档，或者如果我确实忽略/错过了任何内容。

Answer 1

我是个新手，我的解决方案尚未完成，但也许它可以帮助某人继续前进。 我们还需要一个布尔过滤器，我的同事建议制作一个只有两个选项的自定义过滤器：“已批准”和“未批准”（在我们的例子中）。请记住将布尔值转换为数字，因为 ag-grid 只允许过滤文本、数字和日期。我使用单元格值旁边的 + 运算符来完成此操作。

您需要什么： https://ag-grid.com/react-data-grid/filter-provided-simple/#custom-filter-options

我的过滤器最终是这样的：

    const booleanFilter: INumberFilterParams = {
    filterOptions: [
        {
            displayKey: 'true',
            displayName: 'True',
            predicate: (_, cellValue) => +cellValue === 1,
            numberOfInputs: 0,
        },
        {
            displayKey: 'false',
            displayName: 'False',
            predicate: (_, cellValue) => +cellValue === 0,
            numberOfInputs: 0,
        }
    ] as IFilterOptionDef[],
    suppressAndOrCondition: true,
};

将此过滤器添加到 ag-grid 中的列中

                {
                field: 'fieldName',
                filter: 'agNumberColumnFilter',
                filterParams: booleanFilter
            }

Answer 2

您是否将AdapTable与AG Grid一起使用？
我们这样做了，他们自动为任何布尔列提供布尔过滤器。 它们还提供了一种使整个列也显示复选框值的方法（https://docs.adaptabletools.com/guide/handbook-column-formatting#checkbox-column-style），但这对于您的要求来说可能有点过分了.

Answer 3

创建一个外部按钮并将其添加到单击事件

 const handleFilter = useCallback(() => {
gridRef.current!.api.setFilterModel({
  disabled: { type: 'true' },
});

}, []);