Wie unendliches Scrollen mit ng-Gitter zu implementieren

Question

Derzeit verwende ich ng-grid, um Daten in einer Tabellenform anzuzeigen. Für einige Tabellen, die ziemlich viele Datensätze enthalten, verwende ich serverseitiges Paging, um die Daten abzurufen.

Ich bin nicht sehr zufrieden mit dieser Lösung. Ich möchte mehr Daten holen, wenn die Bildlaufleiste das Ende des Fensters erreicht (etwas wie die ngInfiniteScroll Direktive). Ich habe keine Möglichkeit gefunden, dies mit ng-Grid zu tun.

Also meine Frage ist: Kann dies mit ng-grid getan werden, und wenn ja - wie? Für dieses Problem scheint es in ng-grid keine Out-of-the-Box-Lösung zu geben.

Answer 1

Wenn der Benutzer zum Ende des Rasters geblättert hat, wird dieses Ereignis ausgelöst. nützlich für unendliches/serverseitiges Scrollen.

Beispiel:

scope.$on('ngGridEventScroll', function() { 
    //append rows to grid 
}); 

Verwendung dieses Ereignis informiert werden, wenn der Benutzer auf den Boden des Gitters verschoben, so dass Sie mehrere Zeilen an das Netz anhängen können.

Ressource:https://github.com/angular-ui/ng-grid/wiki/Grid-Events

Answer 2

Hier ist das Beispiel für den ng-Grid mit unendlicher Scroll "ngGridEventScroll" Ereignisse verwenden. unterstützt die Gruppierung nach Filter und Sortierung.

Beispiel: http://plnkr.co/edit/AY68jf?p=preview

// main.js 
var app = angular.module('myApp', ['ngGrid']); 
app.controller('MyCtrl', function($scope) { 

    $scope.currentDataPosition = 1; 
    $scope.lastScrollPosition = 0; 
    $scope.mySelections = []; 
    $scope.myData = [{EmployeeName:"David", Emailaddress:"david@abccompany.com", Technology:"MVC"}, 
        {EmployeeName:"Christina", Emailaddress:"christina@abccompany.com", Technology:"MVC"}, 
        {EmployeeName:"Peter", Emailaddress:"Peter@abccompany.com", Technology:".Net"}, 
        {EmployeeName:"Jhon", Emailaddress:"Jhon@abccompany.com", Technology:"SP"}, 
        {EmployeeName:"Michel", Emailaddress:"Michel@abccompany.com", Technology:"SP"}, 
        {EmployeeName:"Mark", Emailaddress:"mark@abccompany.com", Technology:"MVC"}, 
        {EmployeeName:"Reobert",Emailaddress:"robert@abccompany.com",Technology:".Net"} 

        ]; 

    $scope.gridOptions = 
     { 
     data: 'myData', 
     columnDefs: [ 
         {field:'EmployeeName', displayName:'Employee Name' ,width:'150px'}, 
         {field:'Emailaddress', displayName:'Email Address',width:'200px'}, 
         {field:'Technology', displayName:'Technology',width:'100px'} 
        ], 
     groups :['Technology'], 
     groupsCollapsedByDefault: false, 
     showSelectionCheckbox: true, 
     selectWithCheckboxOnly: false, 
     selectedItems: $scope.mySelections, 
     //multiSelect: true, 
     //filterOptions: {filterText: '', useExternalFilter: false}, 
     //showColumnMenu: true, 
     //showFilter: true, 
     }; 

    $scope.GetMoreData = function(position) 
    { 
     if(typeof(position) == 'undefined') 
     { 
      position = 0; 
     } 
     for (var i = 1 ; i < 31 ; i++) 
     { 
      var dep = "MVC"; 

      if(i % 3 == 0) 
      { 
      dep = "Consult"; 
      } 
      else if (i % 5 == 0) 
      { 
      dep = "Audit"; 
      } 
      else if (i % 7 == 0) 
      { 
      dep = "Audit"; 
      } 
      else if (i % 4 == 0) 
      { 
      dep = ".Net"; 
      } 

      var vPos = '('+position+')-' + i; 
      var name = "Employee"+vPos; 
      var email = name + "@abccompany.com"; 
      var employee = {EmployeeName:name,Emailaddress: email,Technology:dep} 
      $scope.myData.push(employee); 
     } 
    } 


    $scope.$on('ngGridEventScroll', function() 
    { 
     var ngGridView = $scope.gridOptions.ngGrid.$viewport[0]; 
     var scrollTop = ngGridView.scrollTop; 
     var scrollOffsetHeight = ngGridView.offsetHeight; 
     var currentScroll = scrollTop + scrollOffsetHeight; 
     var scrollHeight = ngGridView.scrollHeight; 
     console.log(scrollTop); 
     console.log(scrollHeight); 

     $scope.currentDataPosition++; 
     $scope.isLoading = true; 
     $scope.GetMoreData($scope.currentDataPosition); 
     $scope.isLoading = false; 
     console.log('Scrolled .. '); 
    }); 

    $scope.GetMoreData(1);     
});