Comment faire défiler un ngGrid pour afficher la sélection en cours?

Je suis réglage de la sélection de mes ngGrid à partir de JavaScript, appelant gridOptions.selectItem(). J'ai multiSelect définie sur false, donc il n'y a qu'une ligne sélectionnée. J'aimerais que la ngGrid pour faire défiler automatiquement pour afficher la nouvelle ligne sélectionnée, mais je ne sais pas comment faire si quelqu'un peut aider, s'il vous plaît?

Sur un sujet connexe: puis-je désactiver la sélection d'une ligne par un clic de souris? Si oui, comment?

Édité pour ajouter

Je tiens également à désactiver la navigation au clavier de la ligne sélectionnée, si possible.

Ce qui a fonctionné:

AardVark71 réponse travaillé. J'ai découvert que ngGrid définit une propriété ngGrid sur le gridOptions variable qui contient une référence à l'objet de la grille elle-même. Les fonctions sont exposés via les propriétés de cet objet:

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

Ma grille est fixée à 13 lignes haut, et ma logique, tente de faire la ligne sélectionnée s'affichent dans le milieu de la grille.

Je voudrais encore pour désactiver la souris & clavier changements apportés à la sélection, si possible.

Ce qui a également travaillé:

C'est probablement plus près de la Angulaires Way " et réalise la même fin:

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

bien que l'effet lorsqu'une ligne est sélectionnée en cliquant sur il peut être un peu déconcertant.

source d'informationauteur Max

  1. 14

    Il semble que vous pouvez faire usage de la scrollTop méthode de défilement.

    Voir aussi http://github.com/angular-ui/ng-grid/issues/183 et suivants plunker de @bryan-watts http://plnkr.co/edit/oyIlX9?p=preview

    Un exemple de comment cela pourrait fonctionner serait comme suit: 

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


    modifier:

    Pour la deuxième partie de votre question "désactivation de la souris et du clavier événements des lignes sélectionnées" il pourrait être préférable de commencer une nouvelle Question. On dirait que vous voulez régler vos enableRowSelection dynamiquement pour de faux? Aucune idée si c'est possible.

  2. 1

    Je crois que j'ai été à la recherche pour le même comportement de ng-grille comme toi-même. La fonction suivante ajouté à votre gridOptions objet à la fois d'interdire la sélection via les touches fléchées (mais permettent si la touche maj ou ctrl enfoncée) et faites défiler la fenêtre vers le bas de la liste à l'aide des touches fléchées, de sorte que la ligne sélectionnée est toujours visible:

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

    Espère que ça aide!

  3. 1

    J'ai trouvé la accepté la réponse ci-dessus ne fonctionne pas avec la dernière version de l'interface utilisateur-réseau (v4.0.4 - 2017-04-04).

    Voici le code que j'utilise:

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

    Dans gripOptions, vous devez vous inscrire à la gridApi dans onRegisterApi.

    onRegisterApi: function (gridApi) {
   $scope.gridApi = gridApi;
},
  4. 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);
            }
        } 
    });