Scorrere fino alla selezione nella griglia utente angolare (non nella griglia di rete)

Question

Perché la griglia Angular JS funziona, sto utilizzando la griglia Ui piuttosto che la griglia NG poiché la griglia UI è destinata a essere la nuova versione più pura Angolare.

Ho una griglia che sto compilando con una risposta http e sono in grado di selezionare una riga (basata sulla ricerca del record corrispondente a un valore di variabile $ scope) utilizzando il metodo api.selection.selectRow chiamata.

Quello che devo fare è scorrere la griglia fino a quel record.

C'è una domanda di overflow dello stack esistente sulla stessa linea che è per ng-grid e la risposta a ciò si riferisce a funzionalità non documentate che non sono presenti nella griglia utente, quindi non posso usare tale approccio.

Il più vicino possibile è trovare $ scope.gridApi.grid per ottenere un riferimento alla griglia effettiva stessa ma guardando attraverso le proprietà e i metodi nel debugger di Chrome non mostra nulla che suoni come potrebbe funzionare.

Answer 1

È possibile utilizzare il plug-in cellNav. Dovresti già avere un riferimento alla tua entità di riga dalla selezione. La documentazione è here.

gridApi.cellNav.scrollTo(grid, $scope, rowEntity, null); 

Answer 2

Sono riuscito a mettere insieme qualcosa che funziona abbastanza bene, ma è un po 'dubbia e potrebbe probabilmente essere più pulito con una comprensione un po' più angolare/jquery.

Ho utilizzato il browser dom explorer per scoprire che le barre di scorrimento hanno una classe css che possiamo rilevare per trovarli e quindi impostare le proprietà di scorrimento su di essi per avere lo scorrimento della griglia (la griglia e le barre di scorrimento sono div separate ma le loro proprietà sono legati in modo tale da cambiare uno aggiorna l'altro).

Non funziona completamente per scorrere fino all'ultima riga della griglia. Questo potrebbe essere un problema di temporizzazione, ho notato che usando i breakpoint la griglia appare sullo schermo un po 'più grande e poi si riduce alla sua dimensione finale. Questo potrebbe essere un problema con i valori di scorrimento.

Il primo ciclo trova l'altezza della griglia sommando le righe e la posizione y della riga per il mio oggetto dati (progetto), quindi troviamo la barra di scorrimento e impostiamo scrollTop, cercando di centrare la riga su schermo senza uscire dai limiti.

var grid = $scope.projectsGridApi.grid; 
// var row = grid.rowHashMap.get(project.$$hashKey); 

var found = false; 
var y = 0; 
var totalY = 0; 
var rowHeight = 0; 
for (var rowIdx in grid.rows) 
{ 
    var row = grid.rows[rowIdx]; 
    if (row.entity.$$hashKey == project.$$hashKey) 
    { 
     found = true; 
     rowHeight = row.height; 
    } 

    if (!found) 
    { 
     y += row.height; 
    } 
    totalY += row.height; 
} 

// now find the scroll bar div and set it's scroll-top 
// (todo: checking if we're at the end of the list - setting scrollTop > max means it doesn't work properly 
var grid = $scope.projectsGridApi.grid; 


// annoyingly this is nastily coded to find the scrollbar and isn't completely right 
// I think the grid is a little taller when this is called, then shrinks 
// which affects what the maximum is (so we might not always be able to put the selected item on screen if it is the last one). 

var holderDiv = $('#projectsGridHolder'); 
if (holderDiv) 
{ 
    var scrollBarDivs = holderDiv.find('.ui-grid-native-scrollbar'); 
    if (scrollBarDivs) 
    { 
     for (var scrollBarDivIdx in scrollBarDivs) 
     { 
      var scrollBarDiv = scrollBarDivs[scrollBarDivIdx];       

      var scrollBarDivClass = scrollBarDiv.className; 
      if (scrollBarDivClass) 
      { 
       if (scrollBarDivClass.indexOf('vertical') != -1) 
       { 
        var scrollHeight = scrollBarDiv.scrollHeight; 
        var clientHeight = scrollBarDiv.clientHeight; 

        if (rowHeight > 0) 
        { 
         y -= (clientHeight - rowHeight)/2; // center on screen be scrolling slightly higher up 
        } 
        if (y < 0) y = 0; 
        else if (y > totalY - clientHeight) y = totalY - clientHeight; 

        scrollBarDiv.scrollTop = y; 
       } 
      } 
     } 
    } 
}