如何从 Ag-Grid 上下文菜单中隐藏“导出”并替换“工具面板”？

Question

我需要删除 ag-grid 上下文菜单中存在的默认导出选项，并在其中包含工具面板选项。

Answer 1

你可以重写 getContextMenuItems里面的函数gridOptions

getContextMenuItems: this.getCustomContextMenuItems.bind(this)

getCustomContextMenuItems(params:GetContextMenuItemsParams) : MenuItemDef {
    let contextMenu: MenuItemDef = [];

    //... custom export just for info ... 
    contextMenu.push({
            name:"Export",
            subMenu:[
                {
                    name: "CSV Export (.csv)",
                    action: () => params.api.exportDataAsCsv()
                },
                {
                    name: "Excel Export (.xlsx)",
                    action: () => params.api.exportDataAsExcel()
                },
                {
                    name: "Excel Export (.xml)",
                    action: () => params.api.exportDataAsExcel({exportMode:"xml"})
                }
            ]
        })

    return contextMenu;
}

要在工具面板中添加自己的逻辑，您必须：

创建一个自定义的 toolPanelComponent，在这个组件中，您只需要执行exportDataAsCsv()or exportDataAsExcel()。

import {Component, ViewChild, ViewContainerRef} from "@angular/core";
import {IToolPanel, IToolPanelParams} from "ag-grid-community";

@Component({
    selector: 'custom-panel',
    template: `<button (click)="handleExportClick()">Export</button>`
})

export class CustomToolPanelComponent implements IToolPanel {
    private params: IToolPanelParams;

    agInit(params: IToolPanelParams): void {
        this.params = params;
    }

    handleExportClick(){
      this.params.api.exportDataAsCsv()
    }
}

添加CustomToolPanelComponent到AgGridModule.withComponents您的初始化AppModule（或注入的任何模块 ag-grid）

@NgModule({
  imports: [
    ...
    AgGridModule.withComponents([CustomToolPanelComponent])
  ],
  declarations: [AppComponent, CustomToolPanelComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

在其中添加CustomToolPanelComponent引用frameworkComponentsgridOptions

this.frameworkComponents = { customToolPanel: CustomToolPanelComponent};

将CustomToolPanelComponent引用（在 中定义frameworkComponents）添加到sideBar.toolPanels数组

this.sideBar = {
  toolPanels: [
    ...
    {
      id: "customPanel",
      labelDefault: "Custom Panel",
      labelKey: "customPanel",
      iconKey: "custom-panel",
      toolPanel: "customToolPanel"
    }
  ]
};

这是一个示例