Как прокрутить ngGrid, чтобы показать текущий выбор?

Я устанавливаю выделение моего ngGrid из JavaScript, вызывая 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 и достигает того же конца:

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

хотя эффект, когда строка выбирается нажатием на нее, может немного расстраиваться.

Ответы

Ответ 1

Похоже, вы можете использовать метод scrollTop для прокрутки.

См. также http://github.com/angular-ui/ng-grid/issues/183 и следующий плункер из @bryan-watts 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? Не знаю, возможно ли это.

Ответ 2

Я считаю, что искал то же поведение из ng-grid, что и вы. Следующая функция, добавленная к вашему объекту gridOptions, будет запрещать выбор с помощью клавиш со стрелками (но разрешить, если сдвиг или 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;
  },

edit: вот plunkr: http://plnkr.co/edit/xsY6W9u7meZsTJn4p1to?p=preview

Надеюсь, что это поможет!

Ответ 3

Я нашел, что принятый ответ выше не работает с последней версией ui-grid (v4.0.4 - 2017-04-04).

Вот код, который я использую:

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

В gripOptions вам необходимо зарегистрировать gridApi в onRegisterApi.

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

Ответ 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);
            }
        } 
    });