Question

是否可以将侦听器设置为列菜单，以便在我打开和关闭菜单时触发事件？

功能描述：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;
        }
    });

这有点棘手，也可以解决，但目前我无法想到更好的方法。

看一下this Plunker的插图。

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

更新

1 个答案: