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

Question

有没有办法为 column-menu 设置侦听器，以便在我打开和关闭菜单时触发事件？

功能说明：https://www.ag-grid.com/javascript-grid-column-menu/

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

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

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

---

更新

正如 Viqas 在他的 Answer 中所说，没有官方方法可以做到这一点。一世 试图避免使用postProcessPopup 的解决方案并试图找到一个清洁工 我的问题的解决方案 - 存储表状态。

对于关闭 ColumnMenu 时使用回调的解决方法Viqas Answer 更合适。

请注意，这不是回调本身的解决方法 - 它只是存储表状态并执行 ONE API 调用的一种（可能）解决方案

我使用了Angular的ngOnDestory()函数。

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 事件 postProcessPopup 将 columnMenu 存储在此变量中：

<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;
        }
    });

这有点 hacky 和解决方法，但我现在想不出更好的方法。

请查看this Plunker 进行说明。