Ag-Grid 在与下拉列表交互期间保持自定义过滤器打开

Posted 2023-02-18

【中文标题】Ag-Grid 在与下拉列表交互期间保持自定义过滤器打开

【英文标题】：Ag-Grid keep custom filter open during interaction with dropdown

【发布时间】：2021-12-18 19:15:41

【问题描述】：

我有一个自定义过滤器组件，我为每列提供 Ag 网格。该组件包含一个下拉列表。当用户从下拉列表中选择一个选项时，过滤器会在选择时立即关闭，而不是像应有的那样保持打开状态。

如何让过滤器组件在从下拉列表中选择选项时保持打开状态？

【参考方案1】：

阅读更多文档，我在这里找到了答案： https://www.ag-grid.com/javascript-data-grid/component-filter/#custom-filters-containing-a-popup-element

包含弹出元素的自定义过滤器 有时您需要为过滤器创建自定义组件，其中还包含弹出元素。日期过滤器就是这种情况，因为它会弹出一个日期选择器。如果您使用的库将弹出元素锚定在父过滤器之外，那么当您单击它时，网格会认为您在过滤器之外单击并因此关闭列菜单。

有两种方法可以解决此问题：

为您的浮动元素添加鼠标点击监听器并将其设置为 防止默认（）。这样，点击事件就不会冒泡到 网格。这是最好的解决方案，但你只能这样做 自己编写组件。

添加 ag-custom-component-popup CSS 类到您的浮动元素。可以找到这种用法的示例 这里：自定义日期组件