如何使用ng-grid實現無限滾動

目前，我使用ng-grid以表格形式顯示數據。另外，對於有很多記錄的表，我正在使用服務器端分頁來獲取數據。如何使用ng-grid實現無限滾動

我對這個解決方案並不滿意。我想要做的是當滾動條到達窗口的末端時獲取更多數據（如ngInfiniteScroll指令）。我還沒有找到用ng-grid做這件事的方法。

所以，我的問題是：可以這樣用ng-grid做，如果是 - 怎麼樣？ ng-grid這個問題似乎沒有開箱即用的解決方案。

來源

2014-03-24 zszep

溝NG-網格，在自己的表整合ngInfiniteScroll？ –

@Eliran Malka。將ngInfiniteScroll集成到我自己的表中肯定會成爲一種方法。但是，爲什麼會失去ng-grid的所有功能？ – zszep

即使沒有ng-grid，Angular中的表格也非常容易（在我看來也許更容易）。我認爲你不會放棄ng-grid，尤其是如果你還在放棄分頁。 –

當用戶滾動到電網此事件激發的底部。用於無限/服務器端滾動。

例子：

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

使用此事件在用戶滾動到網格的底部，以便您可以追加更多行到電網得到通知。

資源：https://github.com/angular-ui/ng-grid/wiki/Grid-Events

來源

2014-03-24 19:52:35

哦，哇，我裝飾的想法過於複雜的東西。這更簡單和優雅。 –

好吧，我讀了整個ng-grid api文檔，但沒有找到ngGridEventScroll事件。我一定會嘗試這個。如果它有效，那麼我想知道爲什麼它沒有記錄。 – zszep

你可以在他們的wiki頁面找到更多信息https://github.com/angular-ui/ng-grid/wiki –

這裏是NG-網格的使用「ngGridEventScroll」事件無限滾動的例子。通過篩選和排序來支持組。

例子：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:"[email protected]any.com", Technology:"MVC"}, 
        {EmployeeName:"Christina", Emailaddress:"[email protected]", Technology:"MVC"}, 
        {EmployeeName:"Peter", Emailaddress:"[email protected]", Technology:".Net"}, 
        {EmployeeName:"Jhon", Emailaddress:"[email protected]", Technology:"SP"}, 
        {EmployeeName:"Michel", Emailaddress:"[email protected]", Technology:"SP"}, 
        {EmployeeName:"Mark", Emailaddress:"[email protected]", Technology:"MVC"}, 
        {EmployeeName:"Reobert",Emailaddress:"[email protected]",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);     
});

來源

2014-08-29 16:35:59 Thirug

的文檔是的，這是我在Alexin Coroshin的帖子幫助下最終實現它的方式。 – zszep

如何使用ng-grid實現無限滾動

回答

相關問題