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的插圖。