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

Question

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

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

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

背景是：我想在数据库中存储具有显示的cols，排序，cols位置，过滤器等的表状态。 当然我可以使用onFilterChanged ， onDisplayedColumnsChanged或onSortChanged等监听onSortChanged 。 问题是，每次发生变化时都会被触发，因此会产生大量不需要的api调用。

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

---

更新

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

对于ColumnMenu关闭时回调的变通方法， Viqas Answer更合适。

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

我使用了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回调（见这里 ），它提供了PostProcessPopupParams类型的参数; 这包含显示的列菜单弹出元素，因此您可以检查菜单何时不再可见。

创建一个变量来存储columnMenu元素：

columnMenu: any = null;

使用ag-grid事件postProcessPopup将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;
        }
    });

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

看一下这个 Plunker的插图。