10

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

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

编辑添加

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

什么有效:

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

$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 回答