Przewiń do wyboru w Kątowymi UI-siatki (nie ng-Grid)

Question

dla mojego Kątowymi pracy sieci JS używam UI-siatkę zamiast siatki jak NG-ui-siatka ma być nowa wersja, która jest czystsza Kątowy.

Mam siatkę, w której zapełniam odpowiedź http, i jestem w stanie wybrać wiersz (na podstawie znalezienia rekordu pasującego do wartości zmiennej $ scope) za pomocą metody api.selection.selectRow połączenie.

Co muszę zrobić to przejdź starcie do tego rekordu.

Istnieje pytanie o przepełnienie stosu na tych samych liniach, co dla ng-grid, a odpowiedź na to odnosi się do nieudokumentowanych funkcji, które nie są obecne w sieci ui, więc nie mogę użyć tego podejścia.

Najbliższe jest znalezienie $ scope.gridApi.grid, aby uzyskać odniesienie do samej siatki, ale przeglądanie właściwości i metod w debugerze Chrome nie pokazuje niczego, co mogłoby brzmieć jak mogłoby.

Answer 1

Możesz użyć wtyczki cellNav. Powinieneś już mieć odniesienie do jednostki twojego rzędu z zaznaczenia. Dokumentacja to here.

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

Answer 2

udało mi się włamać razem coś, co działa całkiem dobrze, ale to trochę podejrzanie i prawdopodobnie mógłby być czystsze z nieco bardziej kanciasty/jQuery zrozumienia.

Użyłem przeglądarki przeglądarki w domenie, aby znaleźć, że paski przewijania mają klasę css, którą możemy wykryć, aby je znaleźć, a następnie ustawić właściwości przewijania na nich, aby uzyskać przewijanie siatki (siatki i paski przewijania są oddzielnymi elementami div, ale ich właściwości są tak zmienne, że jeden aktualizuje drugi).

To nie całkowicie pracy dla przewijanie do ostatniego wiersza siatki. Może to być problem związany z synchronizacją czasu, zauważyłem podczas używania punktów przerwania, że ​​siatka pojawia się na ekranie trochę większa, a następnie zmniejsza się do jej ostatecznego rozmiaru. Może to być kłopotliwe z przewijanymi wartościami.

Pierwsza pętla znajduje wysokość siatki, dodając wiersze i pozycję y wiersza dla mojego obiektu danych (projektu), a następnie znajdujemy pasek przewijania i ustawiamy jego przewijanie, próbując wyśrodkować wiersz ekran bez wychodzenia poza granice.

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