如何在ag-Grid上自定义“主页”和“结束”键导航?

时间:2017-04-23 19:42:29

标签: ag-grid

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

但现在我想自定义“主页”和“结束”键。

有办法吗?

1 个答案:

答案 0 :(得分:0)

目前并不容易......这里有一些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的Keyboard Navigation部分中提及的特定单元格中添加侦听器 - 自定义操作下的网格文档:

  

自定义操作

     

自定义单元格渲染器可以在重点div上按下按键。   接收焦点的网格元素被提供给单元格   渲染器通过eGridCell参数。您可以添加自己的侦听器   到这个细胞。通过这种方法,你可以听任何按键操作   你自己对单元格的操作,例如点击'x'可以执行命令   你对该单元的申请。