Question

找不到确切答案。如果我决定选择加入普通JavaScript（非Angular＆Co）ag-Grid-community版本，是否可以轻松地将自己的自定义上下文菜单添加到其他自定义扩展中？正如我看到他们的文档一样，上下文菜单仅是企业级功能。我看到了一些注意事项，但我个人没有更深入地了解。通常，在ag-Grid-community中实现自构建功能有多么容易。还是编写自己的网格更好？

Answer 1

我们在带有ag-grid社区的Angular项目中有一个自定义上下文菜单组件，因此绝对有可能。

工作方式：

我们在模板中定义所有网格列。如果需要上下文菜单，可以在列集中放置一个空列，并在其上放置特殊指令。该指令接受上下文菜单模板，该模板将传递到自定义cellRendererFramework（基本上是菜单触发按钮）中。该指令还配置了列，以确保跨网格实例的外观一致。

如果您要求连续单击鼠标右键打开菜单，这可能并不是您一直在寻找的东西，但是我想不应很难触发菜单（来自其他事件）（检查ag-grid事件，可能有些合适的方法）。

下面的代码片段应该很容易适应您选择的框架。既然您选择使用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;
  }
}

屏幕截图：

在ag-Grid-community中是否可以拥有自己的自定义上下文菜单

1 个答案: