如何在 Angular UI 网格中选择下一行？答案

【问题标题】：How to select next row in an Angular UI grid?如何在 Angular UI 网格中选择下一行？
【发布时间】：2015-06-15 03:54:00
【问题描述】：

我有一个选定的行，通过单击某个按钮（目前我通过AngularHotkeys.js 使用空间），我想取消选择当前行并选择当前选定行之后的下一个。

知道我可以用不同的列对表格进行排序，事情变得更加复杂。因此，如果知道应用了当前排序的当前行的索引，那就太好了。

我从哪里开始解决这个问题？
任何建议表示赞赏。

【问题讨论】：

恕我直言，我会为每一行附加一个 id 并按行 id 选择。

标签： javascript angularjs

【解决方案1】：

您可以从$scope.gridApi.grid.renderContainers.body.visibleRowCache 获取处于排序和过滤状态的行数组。当您拥有实体和拥有 gridRow 时，还需要处理很多棘手的问题，因此代码会变得有些复杂。

您的代码将类似于：

$scope.selectNextRow = function() {
  var currentRowIndex;
  var selectedRows = $scope.gridApi.selection.getSelectedRows();
  if( selectedRows.length < 1 ){
    // if nothing selected, we'll select the top row
    currentRowIndex = -1;
  } else {
    // if there are multiple selected, we use the first one
    var selectedRow = selectedRows[0];
    var gridRow = $scope.gridApi.grid.getRow(selectedRow);
    currentRowIndex = $scope.gridApi.grid.renderContainers.body.visibleRowCache.indexOf(gridRow);
  }

  $scope.gridApi.selection.clearSelectedRows();
      $scope.gridApi.selection.selectRow($scope.gridApi.grid.renderContainers.body.visibleRowCache[currentRowIndex + 1].entity);
};

参考http://plnkr.co/edit/Z7HCjVY6oxGJzyjLI6Qo?p=preview

【讨论】：

巨大的帮助 - 当隐藏列并需要换行到下一行时，这对我来说非常有用。

【解决方案2】：

如果我对您的理解正确，您应该能够通过类似的方式完成您想要的事情。（没有测试）

$scope.scrollTo = function( rowIndex ) {
    $scope.gridApi.core.scrollTo( $scope.gridOptions.data[rowIndex], 0);
};

$scope.nextRow() {
   var current = $scope.gridApi.selection.getSelectedRows();
   scrollTo(current + 1);
}

干杯

【讨论】：