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

这是使用＆＃34; ngGridEventScroll＆＃34;的无限滚动的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);                 
});

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

2 个答案: