10

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

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

编辑添加

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

什么有效：

AardVark71 的回答奏效了。我发现 ngGridngGrid在gridOptions变量上定义了一个属性，该属性包含对网格对象本身的引用。通过此对象的属性公开必要的功能：

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

我的网格固定在 13 行高，我的逻辑试图使选定的行出现在网格的中间。

如果可能的话，我仍然想禁用鼠标和键盘对选择的更改。

什么也有效：

这可能更接近“角度方式”并达到相同的目的：

// 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);

尽管通过单击选择一行时的效果可能有点令人不安。

4

4 回答 4

14

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

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

一个如何工作的例子如下：

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


编辑：

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

于 2013-08-29T14:40:13.380 回答
1

我相信我正在从 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

希望有帮助！

于 2014-10-06T18:28:00.840 回答
1

我发现上面接受的答案不适用于最新版本的 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;
},
于 2017-05-16T23:01:44.970 回答
0 
  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);
            }
        } 
    });
于 2013-12-26T13:03:19.863 回答