如何使用ng-grid实现无限滚动

Question

目前,我ng-grid用于以表格方式显示数据.此外,对于一些具有相当多记录的表,我正在使用服务器端分页来获取数据.

我对这个解决方案不太满意.我想要做的是当滚动条到达窗口的末尾(类似ngInfiniteScroll指令)时获取更多数据.我还没有找到一种方法来使用ng-grid.

所以,我的问题是:这可以完成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-Grid示例.通过过滤和排序支持组.

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