Ag-Grid 在按下 'Apply' 按钮后隐藏一个迷你过滤器

Question

我正在其中使用 Enterprise Ag-Grid version in my Angular 6 application. I have a Set Filter。我在过滤器中添加了 'Apply' 按钮：

apply: Set to true to include an 'Apply' button with the filter and not filter automatically as the selection changes.

问题是如何在按下按钮后隐藏迷你过滤器菜单？我没有在官方网站上找到任何关于这种可能性的文档。但是我在内部库 src 文件中找到了注释，在 IComponent.ts:

中指定

 /* A hook to perform any necessary operation just after the gui for this component has been renderer
 in the screen.
 If the filter popup is closed and reopened, this method is called each time the filter is shown.
 This is useful for any
 logic that requires attachment before executing, such as putting focus on a particular DOM
 element. The params has one callback method 'hidePopup', which you can call at any later
 point to hide the popup - good if you have an 'Apply' button and you want to hide the popup
 after it is pressed. */
afterGuiAttached?(params?: IAfterGuiAttachedParams): void;

目前我无法理解如何设置 afterGuiAttached 功能来实现上述目标。

有人能帮帮我吗？
提前致谢！

Answer 1

正如您已经检查过的那样，afterGuiAttached 是 Filter Component

的一部分

所以这个函数可以在自定义过滤器中访问 like here。

所以你应该做的就是在里面定义afterGuiAttached:

export class PartialMatchFilter implements IFilterAngularComp {
    afterGuiAttached(params){
        params.hidePopup() <- executing will close the filter
    }
}

afterGuiAttached - 将按照描述在 init 上执行（但“应用”按钮也是自定义的，您应该自行处理）。您可以将 hidePopup 函数绑定到您的自定义过滤器参数，并在需要时使用它。

export class PartialMatchFilter implements IFilterAngularComp {
    private hideFilter:Function;

    afterGuiAttached(params){
        this.hideFilter = params.hidePopup;
    }
}

执行 this.hideFilter() 将关闭您的过滤器；

我根据参考的演示

做了一个dummy sample

Ag-Grid 在按下 'Apply' 按钮后隐藏一个迷你过滤器

Ag-Grid hide a mini-filter after 'Apply' button is pressed

ag-grid