kątowa ngGrid wybierz wiersz na stronie obciążenia

Question

Moje pytanie jest rozszerzeniem thisquestion

Getting select rows from ng-grid?

plunker - http://plnkr.co/edit/DiDitL?p=preview

muszę rzędu, aby być wybrany na stronie obciążenia i muszę unikać słuchania 'ngGridEventData'

Wywołanie $ scope.gridOptions.selectRow (2, true); w korpusie kontrolera nie działa, ponieważ kratka nie została załadowana.

unikanie odsłuchiwania ngGridEventData jest spowodowane tym, że potrzebuję kontrolera do odsłuchania zdarzenia wywołanego wcześniej i na tej podstawie muszę wybrać wiersz nggrid.

jakieś pomysły?

Answer 1

Dla mnie żadna z odpowiedzi nie pracował (używam ng-Grid v2.0.14).

Wybrana odpowiedź działa prawdopodobnie dlatego, że dane nie są duże lub nie są ładowane przez wywołanie ajax, w przeciwnym razie nie można wybrać wiersza "przed" ngGridEventData, ponieważ zdarzenie jest uruchamiane, gdy wiersze są renderowane, a użytkownik nie może wybierz wiersz, jeśli nie został jeszcze wyrenderowany.
Jeśli którykolwiek z tych warunków się nie powiedzie lub siatka zajmie zbyt wiele czasu niż zwykle, aby renderować, wybrana odpowiedź nie będzie działać.

Mam przewijalną siatkę z około 2000 wierszy, ale nie mam żadnych ograniczeń dotyczących odsłuchiwania ngGridEventData, więc pracowałem nad tym, chociaż ma dziwne zachowanie dla mnie: NgGridEventData odpala dokładnie 4 razy dla mnie, dwa razy przed nadejściem danych z wywołania ajax i dwa razy później.
Użyłem tej wtyczki jquery http://benalman.com/projects/jquery-throttle-debounce-plugin/ (można jej używać nawet bez jQuery), aby ją wywołać tylko raz.

A ponieważ to nie wystarczy, funkcja "selectRow/selectItem" wyzwala dwukrotne zdarzenie "afterSelectionChange" (po raz pierwszy z nieprawidłowym wierszem, z jakiegoś powodu).Właśnie to musiałem zrobić, aby upewnić się, że wydarzenie zostało wystrzelone tylko raz i tylko dla prawidłowego rzędu.

To co się dzieje za mną:

• ngGridEventData (bez afterSelectionChange wyzwalacze, prawdopodobnie dlatego, że nie istnieją żadne świadczone rzędy)
• ngGridEventData (bez afterSelectionChange wyzwalacze, prawdopodobnie dlatego, że nie istnieją żadne świadczone rzędy)
• Ajax wywołanie do pobierania danych
• opóźnienie (prawdopodobnie rendering)
• ngGridEventData
• afterSelectionChange x2
• ngGridEventData
• afterSelectionChange x2

więc musiałem użyć tego:

• nieczułości aby upewnić się, że funkcja jest wywoływana tylko raz w czasie opóźnienia (timeout jest niska, ponieważ połączenia są blisko siebie w pary, a wyrenderowane wiersze sprawdzają, czy pierwsze wywołanie nie jest używane)
• Sprawdź, czy wiersze renderowane są> 0, aby upewnić się, że jodła st 2 zdarzenia nie są wyzwalane na wolnych sistemach (lub powolnym połączeniu), gdzie opóźnienie i ładowanie danych może zająć trochę czasu
• Opcjonalnie użyj rowItem.selected, aby uniknąć kolejnego "błędu", ponieważ zdarzenie afterSelectionChange jest uruchamiane dwukrotnie, nawet po wybraniu wiersza (raz dla niezaznaczonego wiersza i raz dla wybranego wiersza) użyj zmiennej fireOnlyOnce, aby uniknąć wywołania podwójnej funkcji afterSelectionChange.

Oto przykładowy kod:

$scope.fireOnlyOnce=true; 
$scope.gridOptions = { 
    //Stuff 
    afterSelectionChange: function (rowItem) { 
     if($scope.fireOnlyOnce){ 
      if(rowItem.selected){ 
       //Do stuff 
      } 
     } else { 
      $scope.fireOnlyOnce=true; 
     } 
    } 
}; 

$scope.$on('ngGridEventData', jQuery.debounce(100, function (row, event){ 
    var renderedRows = row['targetScope'].renderedRows.length; 
    if(renderedRows>0){ 
     $scope.fireOnlyOnce=false; 
     $timeout(function(){$scope.gridOptions.selectRow(2, true)}); 
    } 
})); 

Answer 2

Dodaj $timeout do kontrolera i to zrobić:

$timeout(function() { 
    $scope.gridOptions.selectRow(2, true); 
}); 

Przykład: http://plnkr.co/edit/hDv7b8?p=preview

Answer 3

Ok, odpowiedź została przyznana dawno temu, ale nadal uważam, że ma zapach kodu (Bez urazy plakatu, ale jest nieoptymalne.

Co zrobiłem było użyć siatki za ngGridEventData wydarzenie.

Musisz być ostrożny, ponieważ uruchamia się wiele razy (raz dla każdego dodanego wiersza), , ale, ponieważ znamy rozmiar danych, które będą wypełniać przepaskę, a od zdarzenia pozwala nam to sprawdzić, ile wiersze zostały wyrenderowane, możemy stwierdzić, kiedy ostatni wiersz jest renderowany, co oznacza, że ​​siatka nie jest w pełni wyświetlana (UWAGA: Nie testowałem tego z przewijaniem siatki, gdzie niektóre wiersze mogą być niewidoczne, czy ktoś mógłby potwierdzić, jeśli działa w przypadku kapelusza? Osobiście nigdy nie używam przewijanych siatek (jest to strona przeglądarki, a nie Pulpit).

coś takiego:

$scope.$on('ngGridEventData', function (row, event) 
       { 
        if (event == $scope.vehicleTypeGridOptions.gridId) 
        { 
         console.info('@+@ vehicleTypeGridOptions grid updated'); 
         var renderedRows = row['targetScope'].renderedRows.length; 
         console.info('renderedRows = ' + renderedRows + '; num data rows = ' + $scope.vehicleTypesGridData.length);      

         if (renderedRows == 0) 
         { 
          return; 
         } 

         // if grid rowcount = dat length then it's fully displayed 
         if (renderedRows == $scope.vehicleTypesGridData.length) 
         { 
          console.log('vehicleTypeGrid fully rendered. Select row zer0, then populate vehicleDescriptionGrid'); 
          console.info('Select row zer0');         
          $scope.vehicleTypeGridOptions.selectItem(0, true); // Grid rendered, select first row 
          // console.table($scope.vehicleTypeGridOptions.selectedItems); 
          var vehicle_type =  $scope.vehicleTypeGridOptions.selectedItems[0].vehicle_type; 
          console.info(vehicle_type);        
         } 
        } 

Answer 4

Rozwiązanie bez limitu czasu można znaleźć tutaj: https://github.com/angular-ui/ui-grid/issues/2267 i tutaj: Pre-Select rows on load with angular-ui-grid

$scope.gridOptions = { 
... 
       onRegisterApi : function (gridApi) { 
        $scope.gridApi = gridApi; 
        $scope.gridApi.grid.modifyRows($scope.gridOptions.data); 
        $scope.gridApi.selection.selectRow($scope.gridOptions.data[0]); 
       } 
      }; 

Widocznie modifyRows wymaga v3.0.0-rc .22+