Question

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

Answer 1

您可以在getContextMenuItems中使用just override 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;
}

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

创建一个custom toolPanelComponent，在此组件内，您只需执行exportDataAsCsv()或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内的frameworkComponents中添加gridOptions引用

this.frameworkComponents = { customToolPanel: CustomToolPanelComponent};

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

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

Here is a sample

Answer 2

我做了类似@ un.spike的事情。我使用了params.context.gridApi而不是api，因为api没有这些功能。

getContextMenuItems(params) {
return [
  'copy',
  'copyWithHeaders',
  'paste',
  'separator',
  {
    name: 'Export All',
    subMenu: [
      {
        name: 'CSV Export',
        action: () => {
          params.context.gridApi.exportDataAsCsv();
        }
      },
      {
        name: 'Excel Export (.xlsx)',
        action: () => {
          params.context.gridApi.exportDataAsExcel();
        }
      },
      {
        name: 'Excel Export (.xml)',
        action: () => {
          params.context.gridApi.exportDataAsExcel({ exportMode: 'xml' });
        }
      }
    ]
  }
];

}

以及我生成上下文的地方

gridOptions = {
    context: this
}

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

2 个答案: