Question

我正在设置从JavaScript中选择我的ngGrid，调用gridOptions.selectItem()。我将multiSelect设置为false，因此只选择了一行。我希望ngGrid能够自动滚动以显示新选择的行，但我不知道该怎么做：请有人帮忙吗？

关于相关主题：我可以通过鼠标单击禁用行选择吗？如果是这样，怎么样？

已编辑添加

如果可能，我还想禁用所选行的键盘导航。

什么有效：

AardVark71的答案奏效了。我发现ngGrid在ngGrid变量上定义了一个属性gridOptions，它保存了对网格对象本身的引用。必要的函数通过此对象的属性公开：

$scope.gridOptions.selectItem(itemNumber, true);
$scope.gridOptions.ngGrid.$viewport.scrollTop(Math.max(0, (itemNumber - 6))*$scope.gridOptions.ngGrid.config.rowHeight);

我的网格固定为13行高，我的逻辑尝试使所选行显示在网格的中间。

我还是想禁用鼠标和放大器如果可能，键盘将更改为选择。

还有什么用处：

这可能更接近'Angular Way'并达到同样目的：

// This $watch scrolls the ngGrid to show a newly-selected row as close to the middle row as possible
$scope.$watch('gridOptions.ngGrid.config.selectedItems', function (newValue, oldValue, scope) {
            if (newValue != oldValue && newValue.length > 0) {
                var rowIndex = scope.gridOptions.ngGrid.data.indexOf(newValue[0]);
                scope.gridOptions.ngGrid.$viewport.scrollTop(Math.max(0, (rowIndex - 6))*scope.gridOptions.ngGrid.config.rowHeight);
            }
        }, true);

虽然通过点击选择行的效果可能有点令人不安。

Answer 1

听起来你可以使用 scrollTop 方法进行滚动。

另请参阅http://github.com/angular-ui/ng-grid/issues/183以及来自@ bryan-watts http://plnkr.co/edit/oyIlX9?p=preview的以下plunker

这可行的一个例子如下：

function focusRow(rowToSelect) {
  $scope.gridOptions.selectItem(rowToSelect, true);
  var grid = $scope.gridOptions.ngGrid;
  grid.$viewport.scrollTop(grid.rowMap[rowToSelect] * grid.config.rowHeight);
}

修改：

对于问题的第二部分“禁用所选行的鼠标和键盘事件”，最好开始一个新的问题。听起来你想将enableRowSelection动态设置为false？不知道是否可能。

Answer 2

我相信我一直在寻找与ng-grid相同的行为。添加到gridOptions对象的以下函数将禁止通过箭头键进行选择（但如果按住shift或ctrl则允许它），并在使用箭头键向下移动列表时滚动窗口，以便当前选定的行始终可见：

beforeSelectionChange: function(rowItem, event){
    if(!event.ctrlKey && !event.shiftKey && event.type != 'click'){
      var grid = $scope.gridOptions.ngGrid;
      grid.$viewport.scrollTop(rowItem.offsetTop - (grid.config.rowHeight * 2));
      angular.forEach($scope.myData, function(data, index){
        $scope.gridOptions.selectRow(index, false);
      });
    }
    return true;
  },

编辑：这是一个plunkr： http://plnkr.co/edit/xsY6W9u7meZsTJn4p1to?p=preview

希望有所帮助！

Answer 3

我发现上面接受的答案不适用于最新版本的ui-grid（v4.0.4 - 2017-04-04）。

以下是我使用的代码：

$scope.gridApi.core.scrollTo(vm.gridOptions.data[indexToSelect]);

在gripOptions中，您需要在onRegisterApi中注册gridApi。

onRegisterApi: function (gridApi) {
   $scope.gridApi = gridApi;
},

Answer 4

  var grid = $scope.gridOptions.ngGrid;
    var aggRowOffsetTop = 0;
    var containerHeight = $(".gridStyle").height() - 40;
    angular.forEach(grid.rowFactory.parsedData, function(row) {
        if(row.entity.isAggRow) {
            aggRowOffsetTop = row.offsetTop;
        }
        if(row.entity.id == $scope.selectedId) {
            if((row.offsetTop - aggRowOffsetTop) < containerHeight) {
                 grid.$viewport.scrollTop(aggRowOffsetTop);
            } else {
                grid.$viewport.scrollTop(row.offsetTop);
            }
        } 
    });

如何滚动ngGrid以显示当前选择？

4 个答案: