当cellNav与Angular JS中的ui-grid一起使用时,修改tab键并输入键行为

时间:2017-09-09 12:18:40

标签: javascript angular-ui-grid ng-grid ui-grid

我正在使用ui-gridui-grid-selectionui-grid-cellNav模块。 我可以根据documentation中提到的键行为浏览网格。

我想在使用TAB时更改ENTERcellNav键的行为。

有人可以建议一种方法。

当按下TAB时,我想从网格中失焦。 按下ENTER时,我想打开所选行的超链接。

1 个答案:

答案 0 :(得分:0)

您可以在gridApi.cellNav.on.viewPortKeyDown功能中更改按键的行为。

$scope.gridOptions = {
    onRegisterApi: function(gridApi) {
        gridApi.cellNav.on.viewPortKeyDown($scope, function (event, newRowCol) {
            if (event.key == 'Tab') {
                event.preventDefault();
                $('.ui-grid-cell-focus').removeClass('ui-grid-cell-focus');
            }
            if (event.key == 'enter')
                event.preventDefault();
       })
   },
   keyDownOverrides: [{
          keyCode: 13,
          ctrlKey: false
      }, //enter
      {
          keyCode: 9,
          ctrlKey: false
      } //tab
   ] 
}

删除ui-grid-cell-focus只会产生视觉效果,但是,使用箭头,您仍然可以转到周围的单元格。如果您不想这样,可以尝试以编程方式更改聚焦元素或阻止其他导航键的默认操作。

我并不完全不知道你在输入时想做什么。