如何自定义 ag-Grid 上的“home”和“end”键导航？

Question

我使用回调“navigateToNextCell”自定义了箭头导航键。

但现在我想自定义 'Home' 和 'End' 键。

有什么办法吗？

Answer 1

目前还不是很容易……这里有一些相关的“增强”，已在 github 页面上请求：

support page up/ down, home and end keys

allow overriding of keyboard events

Suggestion: Allow any key for navigation (not just tab)

最后一个链接有一些有用的东西。关于如何禁用“home”和“end”键的任何传播的评论：

// note, this is angular 2 code, `this.el.nativeElement` is just the grid component
document.documentElement.addEventListener(
  'keydown',
  (e: KeyboardEvent) => {
    // this runs on the document element, so check that we're in the grid
    if (this.el.nativeElement.contains(e.target)) {
      if (e.key === 'Tab' || e.key === 'Home' || e.key === 'End') {
        e.stopImmediatePropagation();
        e.stopPropagation();
      }
      if (e.key === 'Home' || e.key === 'End') {
        // we don't want to prevent the default tab behaviour
        e.preventDefault();
      }
    }
  },
  true
);

完成此操作后，您可以将新的事件侦听器添加到网格中，或者根据您要执行的操作，您可以将侦听器添加到特定单元格，如 Ag-Grid 的 Keyboard Navigation 部分中所述自定义操作下的文档：

自定义操作

自定义单元格渲染器可以监听焦点 div 上的按键。 接收焦点的网格元素提供给单元格 通过 eGridCell 参数渲染器。您可以添加自己的听众 到这个细胞。通过这种方法，您可以听到任何按键并执行 您自己对单元格的操作，例如点击“x”可能会在 您对该单元格的申请。