Wie scrolle ich ein ngGrid, um die aktuelle Auswahl anzuzeigen?

Question

Ich setze die Auswahl meiner ngGrid von JavaScript, Aufruf gridOptions.selectItem(). Ich habe multiSelect auf false gesetzt, so dass immer nur eine Zeile ausgewählt ist. Ich möchte, dass das ngGrid automatisch scrollt, um die neu ausgewählte Zeile anzuzeigen, aber ich weiß nicht, wie ich das tun soll: Kann mir bitte jemand helfen?

Zu einem verwandten Thema: Kann ich die Zeilenauswahl per Mausklick deaktivieren? Wenn das so ist, wie?

Edited

Ich würde auch Tastatur-Navigation der ausgewählten Zeile möchte hinzufügen, deaktivieren, falls möglich.

Was hat funktioniert:

AardVark71 Antwort gearbeitet. Ich entdeckte, dass ngGrid eine Eigenschaft auf der gridOptions Variable definiert, die einen Verweis auf das Gitterobjekt selbst enthält. Die notwendigen Funktionen werden über Eigenschaften dieses Objekts ausgesetzt:

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

Mein Gitter auf 13 Reihen hoch festgelegt ist, und meine Logik versucht, die ausgewählte Zeile erscheint in der Mitte des Gitters zu machen.

Ich möchte immer noch die Maus & Tastatur Änderungen an der Auswahl, wenn möglich zu deaktivieren.

Was auch gearbeitet:

Dies ist wahrscheinlich näher an der ‚Angular Way‘ und erreicht das gleiche Ziel:

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

obwohl der Effekt, wenn eine Zeile durch Anklicken ausgewählt wird, kann ein bisschen beunruhigend sein.

Answer 1

Es klingt wie Sie die scrollTop Methode für das Scrollen verwenden können.

Siehe auch http://github.com/angular-ui/ng-grid/issues/183 und die folgenden Plunker von @ bryan-Watt http://plnkr.co/edit/oyIlX9?p=preview

Ein Beispiel, wie dies funktionieren könnte, wäre wie folgt:

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

bearbeitet:

Für Der zweite Teil Ihrer Frage "Deaktivieren der Maus und Tastatur Ereignisse der ausgewählten Zeilen" es wäre am besten, eine ne zu starten w Frage. Klingt so, als ob du deine enableRowSelection dynamisch auf false setzen möchtest? Keine Ahnung, ob das möglich ist.

Answer 2

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

Answer 3

Ich glaube, ich war auf der Suche nach dem gleichen Verhalten von ng-Grid wie Sie selbst.Die folgende Funktion, die Ihrem gridOptions-Objekt hinzugefügt wurde, verhindert die Auswahl mit den Pfeiltasten (wenn die Umschalttaste oder die Strg-Taste gedrückt gehalten wird) und scrollt das Fenster, wenn die Liste mit den Pfeiltasten nach unten bewegt wird :

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: hier ist ein plunkr: http://plnkr.co/edit/xsY6W9u7meZsTJn4p1to?p=preview

Hoffnung, das hilft!

Answer 4

Ich fand die oben angenommene Antwort funktioniert nicht mit der neuesten Version von UI-Grid (v4.0.4 - 2017-04-04). Hier

ist der Code, den ich verwenden:

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

In gripOptions, müssen Sie die gridApi in onRegisterApi registrieren.

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