Question

希望这对其他人有帮助。我正在使用ag-grid企业的上下文菜单功能。我希望有一个与菜单项相对应的快捷键，但是按组合键时什么也没发生。

为了使（对我而言）更加混乱，他们自己的操作方法示例不起作用：

https://www.ag-grid.com/javascript-grid-context-menu/

Answer 1

问题在于，快捷方式属性仅列出快捷方式，但不触发任何操作。您还必须为cellKeyDown事件编写一个事件处理程序，以查看快捷方式：

import { Component } from '@angular/core';
import { GetContextMenuItemsParams } from 'ag-grid-community';

@Component({
  selector: 'app-root',
  template: 
  `
    <ag-grid-angular style="width: 500px; height: 500px;" class="ag-theme-balham"
    [rowData]="rowData" [columnDefs]="columnDefs"
    [getContextMenuItems]="getContextMenuItems"
    (cellKeyDown)="onCellKeyDown($event)">
    </ag-grid-angular>
  `,
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'ag-grid-import-excel';

  columnDefs = [
      {headerName: 'Make', field: 'make' },
      {headerName: 'Model', field: 'model' },
      {headerName: 'Price', field: 'price'}
  ];

  rowData = [
      { make: 'Toyota', model: 'Celica', price: 35000 },
      { make: 'Ford', model: 'Mondeo', price: 32000 },
      { make: 'Porsche', model: 'Boxter', price: 72000 }
  ];

  getContextMenuItems(params:GetContextMenuItemsParams ) {
    return [
      'copy', 
      'copyWithHeaders', 
      'paste',
      'separator', 
      {
        name: "insert",
        shortcut: "Alt + i",
        action: function() {
          console.log("insert");
        },
        icon: '<i class="fas fa-plus"></i>'
      },
      'export',
    ];
  }

  onCellKeyDown($event) {
    let event:KeyboardEvent = $event.event;
    if (event.altKey && event.key === "i") {
      console.log('alt i pressed')
    }
  }
}

AGID网格上下文菜单快捷键不起作用

1 个答案: