ag-grid - 是否可以在 ag-Grid-community 中拥有自己的自定义上下文菜单
问题描述
找不到确切的答案。如果我决定选择加入 vanilla JavaScript(非 Angular & Co)ag-Grid-community 版本,我可以轻松地将自己的自定义上下文菜单添加到其他自定义扩展中吗?正如我看到他们的文档,上下文菜单只是企业级功能。我看到一些提示有一些警告,但我个人并没有深入挖掘。一般来说,在 ag-Grid-community 中实现自建功能是多么容易。还是自己写网格更好?
解决方案
在我们的 Angular 项目中,我们在 ag-grid 社区中有一个自定义上下文菜单组件,所以这绝对是可能的。
这个怎么运作:
我们在模板中定义所有网格列。如果你想要一个上下文菜单,你可以在列集中放置一个空列并在其上放置一个特殊指令。该指令接受上下文菜单模板,该模板被传递给自定义cellRendererFramework
(基本上是菜单触发按钮)。该指令还配置列以确保跨网格实例的外观一致。
如果您需要在连续任意位置单击鼠标右键打开菜单,这可能不是您一直在寻找的,但我想从不同的事件触发菜单应该不难(查看 ag-网格事件,可能有合适的东西)。
下面的片段应该很容易适应您选择的框架。鉴于您选择使用 vanilla JS,您将不得不使用常规函数来执行相同操作,如下所示:
const grid = withContextMenu(new Grid(element, gridOptions), menuOptions)
.
这是我们如何使用它的示例:
<ag-grid-angular>
<ag-grid-column headerName='ID' field='id'></ag-grid-column>
<ag-grid-column [contextMenu]='menu'>
<mat-menu #menu='matMenu'>
<ng-template matMenuContent let-item='data'>
<button mat-menu-item (click)='restoreSnapshot(item.id)'>Restore From Snapshot</button>
<a mat-menu-item [routerLink]='[item.id, "remove"]'>Remove</a>
</ng-template>
</mat-menu>
</ag-grid-column>
</ag-grid-angular>
应用菜单的指令:
const WIDTH = 42;
export const CONTEXT_MENU_COLID = 'context-menu';
@Directive({
selector: '[agGridContextMenu]'
})
export class AgGridContextMenuDirective implements AfterViewInit {
constructor(private gridComponent: AgGridAngular) {}
@Input()
agGridContextMenu!: ElementRef<MatMenu>;
ngAfterViewInit() {
if (!this.agGridContextMenu) return;
setTimeout(() => {
this.gridComponent.api.setColumnDefs([
...this.gridComponent.columnDefs,
{
colId: CONTEXT_MENU_COLID,
cellRendererFramework: CellRendererContextMenuComponent,
width: WIDTH,
maxWidth: WIDTH,
minWidth: WIDTH,
cellStyle: {padding: 0},
pinned: 'right',
resizable: false,
cellRendererParams: {
suppressHide: true,
contextMenu: {
menu: this.agGridContextMenu
}
}
}
]);
});
}
}
单元格渲染器组件:
@Component({
selector: 'cell-renderer-context-menu',
template: `
<ng-container *ngIf='params.data && params.colDef.cellRendererParams.contextMenu.menu'>
<button
type='button'
mat-icon-button
[matMenuTriggerFor]='params.colDef.cellRendererParams.contextMenu.menu'
[matMenuTriggerData]='{data: params.data}'
>
<mat-icon svgIcon='fas:ellipsis-v'></mat-icon>
</button>
</ng-container>
`,
styleUrls: ['./cell-renderer-context-menu.component.scss']
})
export class CellRendererContextMenuComponent implements ICellRendererAngularComp {
params!: ICellRendererParams;
agInit(params: ICellRendererParams) {
this.params = params;
}
refresh() {
return false;
}
}
截图:
推荐阅读
- javascript - 通过抓取 className,根据页面加载时指定的现有内容替换 DIV 内容
- adb - 验证 Android Toast 消息
- spring-boot - 无法连接到 Docker-compose 上的容器(Spring Cloud Config Server)
- excel - 使用 Sub 设置 Class 属性
- scikit-learn - 有没有办法在 python 中为 NMF 重塑多个图像?
- python - 根据pyspark中的分区列生成重复行号
- javascript - 尝试在谷歌应用脚本中检索段落的子元素时出现异常
- google-tag-manager - 如何刷新跨两个标签持久的 dataLayer 变量?
- reactjs - 有没有办法我可以在反应原生中发送一组对象,其中对象包含文本和文本的相应 onPRess 动作?
- json - 从 Ionic React 中的 useState 获取参数