4

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

4

4 回答 4

5

我稍微修改了 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。

于 2014-11-04T01:57:56.163 回答
3

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

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

这是一个Plunker

于 2014-11-03T09:13:57.283 回答
0

Vipa 的回答几乎是正确的，但有一个问题：当您第一次单击时，在任何行中，始终会完全选中第一行。

为了纠正这个问题，angular 需要一个周期来捕获导航。
我改进该答案的建议是放入.on.navigate.$interval：

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

这是在plunker

于 2015-08-04T19:53:54.220 回答
0

提供的解决方案是对行进行实际选择。如果您只想突出显示整行而不是单击的单元格，您可以更新原始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);with return (focusedRowCol.row === $scope.row);，其余的将由原始代码完成。

于 2016-02-16T14:05:21.963 回答