AG-Grid（企业）列菜单监听器

Question

有没有办法为列菜单设置一个监听器，以便在我打开和关闭菜单时触发一个事件？

功能描述：https://www.ag-grid.com/javascript-grid-column-menu/

我已经在官方文档中搜索过了，但是没有找到答案。

背景是： 我想将 table 状态与显示的列、排序、列的位置、过滤器等一起存储在数据库中。当然，我可以使用像 onFilterChanged、onDisplayedColumnsChanged 或 onSortChanged 这样的监听器。 问题是，每次发生变化时它都会被触发，因此会产生很多不需要的 api-调用。

这就是为什么我想在列菜单关闭时执行 one 调用。

---

Update

As Viqas said in his , there is no official way to do it. I tried to avoid the solution with postProcessPopup and tried to find a cleaner solution for my problem - to store the table state.

For a workaround with a callback when ColumnMenu is closed is more appropriate.

Notice that this is no workaround for the callback itself - it is just a (possible) solution to store the table state and perform ONE API Call

I used the ngOnDestory() function of Angular.

ngOnDestory(): void {
  const tableState = {
    columnState: this.gridOptions.columnApi.getColumnState(),
    columnGroupState: this.gridOptions.columnApi.getColumnGroupState(),
    sortState: this.gridOptions.api.getSortModel(),
    filterState: this.gridOptions.api.getFilterModel(),
    displayedColumns: this.gridOptions.columnApi.getAllDisplayedColumns()
  };

  // submit it to API
}

Answer 1

你是对的，没有官方的方法可以做到这一点。一种解决方法是自行检测菜单何时关闭。 Ag-grid 确实为您提供了 postProcessPopup 回调（参见 here），它提供了 PostProcessPopupParams 类型的参数；这包含显示的列菜单弹出元素，因此您可以检查菜单何时不再可见。

创建一个变量以将 columnMenu 元素存储在：

columnMenu: any = null;

使用 ag-grid 事件将 columnMenu 存储在此变量中 postProcessPopup:

<ag-grid-angular [postProcessPopup]="postProcessPopup"></ag-grid-angular>

this.postProcessPopup = function(params) {
  this.columnMenu = params.ePopup;
}.bind(this);

然后创建一个侦听器来检测何时列菜单在 dom:

中不再可见

this.renderer.listen('window', 'click',(e:Event)=>{
      console.log(this.columnMenu)
        const columnMenuIsInDom = document.body.contains(this.columnMenu);

        if (!columnMenuIsInDom && this.columnMenu != null)
        {
          this.columnMenu = null;
        }
    });

这有点老套，是一种解决方法，但目前我想不出更好的方法。

查看 this Plunker 进行说明。