ng-grid로 무한 스크롤을 구현하는 방법

Question

현재 표 형식으로 데이터를 표시하려면 ng-grid을 사용하고 있습니다. 또한 레코드가 많은 테이블의 경우 서버 쪽 페이징을 사용하여 데이터를 가져 오려고합니다.

이 솔루션에 만족하지 않습니다. 스크롤바가 창 끝에 도달하면 더 많은 데이터를 가져오고 싶습니다 (ngInfiniteScroll 지시문과 같은 것). 나는 NG 그리드로 이것을 할 수있는 방법을 찾지 못했습니다.

제 질문은 : ng-grid으로 처리 할 수 ​​있습니까? 그렇다면 어떻게 할 수 있습니까? 이 문제에 대해서는 ng-grid의 해결 방안이없는 것 같습니다.

Answer 1

사용자가 눈금의 맨 아래로 스크롤하면이 이벤트가 발생합니다. 무한/서버 측 스크롤에 유용합니다.

예 :

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

사용이 이벤트는 사용자가 그리드에 행을 추가 할 수 있도록 사용자가 그리드의 맨 아래로 스크롤 할 때 알림을받을 수 있습니다.

리소스 : 여기https://github.com/angular-ui/ng-grid/wiki/Grid-Events

Answer 2

무한 스크롤 "ngGridEventScroll"이벤트를 사용하여 함께 NG-그리드의 예입니다. 필터 및 정렬 기준으로 그룹을 지원합니다.

예 : 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);     
});