Question

我热衷于从ng-grid 2迁移到新的ui-grid 3.0替代品。事情到目前为止看起来不错我无法弄清楚的一件事是如何使用向上和向下箭头键来启用记录。当multiSelect设置为false时，这与ng-grid开箱即用。

Answer 1

我稍微修改了mainguy的Plunker以达到你想要的效果。

主要区别在于使用ui-grid-selection

<div ng-controller="MainCtrl">
  <div ui-grid="gridOptions" ui-grid-selection></div>
</div>

和2个选项：enableRowHeaderSelection和multiSelect。

$scope.gridOptions = {
  enableRowHeaderSelection: false,
  multiSelect: false
};

这是Plunker。

更新：以下代码将帮助您在使用箭头键时选择整行。

$scope.gridOptions.onRegisterApi = function(gridApi){
  $scope.gridApi = gridApi;

  gridApi.cellNav.on.navigate($scope,function(newRowCol, oldRowCol){
    $scope.gridApi.selection.selectRow(newRowCol.row.entity);
  });
};

这是Plunker。

Answer 2

在ui-grid中，您必须在标记中启用单元格导航：

<div ng-controller="MainCtrl">
  <div ui-grid="gridOptions" ui-grid-cellNav></div>
</div>

这是Plunker

Answer 3

Vipa's answer几乎是正确的，但有一个问题：当你第一次点击时，在任何一行中，总是第一行完全被选中。

要纠正此问题，角度需要一个周期来捕捉导航我建议改进答案的方法是将.on.navigate.放入$ interval：

$interval(function() {
  gridApi.cellNav.on.navigate($scope,function(newRowCol, oldRowCol){
    $scope.gridApi.selection.selectRow(newRowCol.row.entity);
  });
}, 1);

这是plunker

Answer 4

提供的解决方案正在对行进行实际选择。如果您只希望突出显示整行而不是仅点击单元格，则可以更新原始ui-grid.js并更改以下块中的1行代码：

$scope.$on(uiGridCellNavConstants.CELL_NAV_EVENT, function (evt, rowCol, modifierDown) {
  var isFocused = grid.cellNav.focusedCells.some(function(focusedRowCol, index){
    return (focusedRowCol.row === $scope.row && focusedRowCol.col === $scope.col);
   });
   if (isFocused){
     setFocused();
   } else {
     clearFocus();
   }
 });

只需将return (focusedRowCol.row === $scope.row && focusedRowCol.col === $scope.col);替换为return (focusedRowCol.row === $scope.row);，其余部分将由原始代码完成。

angularjs ui-grid 3.0键导航

4 个答案: