ag-grid - 如何从 Ag-Grid 上下文菜单中隐藏“导出”并替换“工具面板”?
问题描述
我需要删除 ag-grid 上下文菜单中存在的默认导出选项,并在其中包含工具面板选项。
解决方案
你可以在里面覆盖 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;
}
要在工具面板中添加自己的逻辑,您必须:
创建一个custom
toolPanelComponent
,在这个组件中,你只需要执行exportDataAsCsv()
orexportDataAsExcel()
。
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
到您(或注入的任何模块 ag-grid)中AgGridModule.withComponents
的初始化AppModule
@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"
}
]
};
推荐阅读
- r - 从整个句子中删除多余的空格
- docusignapi - 我无法从 docsign 获得激活电子邮件
- android - 如何使用查询发送 Retrofit2 HTTP 请求?
- java - 将 Arraylist 拆分为 2 并使用不同的线程对其进行排序
- c# - 使用默认编码从文件中读取字符串后如何更改字符串编码?
- android - 如何在 Android XML 中放置和缩放多个图像
- java - 如何区分 importData 中的复制/移动
- python - 在 Flask-SQLAlchemy 中调用 SQLite 连接的方法
- r - 为 pheatmap 图中的特定单元格着色
- android - 停止录音机后应用程序崩溃