代码之家 › 专栏 › 技术社区 › noneJavaScript

如何在ngGridEventScroll上使用页面滚动?

infinite-scroll ng-grid angularjs jquery javascript

noneJavaScript · 技术社区 · 9 年前

使用ngGridv2.X,我试图开发一个在页面滚动(而不是网格滚动)到达底部时加载更多数据的网格。

通过搜索类似的问题,我找到了解决我的 第一个问题 : ngGrid必须具有动态高度 ,所以我做到了

.ngViewport{ height:auto !important; } .ngCanvas, .ngViewport, .ngRow, .ngFooterPanel, .ngTopPanel { width: 100% !important; } .ngRow { border-bottom:none !important; }

这把我带到 我的第二个问题。 我需要通过滚动加载数据,我发现: ng网格事件滚动 ,但不是 仅当使用ngGrid实习生滚动时触发,我需要页面滚动

  $scope.$on('ngGridEventScroll', function () {
        $scope.currentDataPosition++;
        $scope.setPagingData($scope.dataArray, $scope.currentDataPosition, $scope.pagingOptions.pageSize);
    });

因此,解决方案1打破了解决方案2,因为ngGridEventScroll不再具有实习生滚动。

 $scope.setPagingData = function (data, page, pageSize) {
        cfpLoadingBar.start();
        var pagedData = data.slice((page - 1) * pageSize, page * pageSize, page * pageSize);
        $scope.totalServerItems = data.length;
        $scope.myData = pagedData;
        cfpLoadingBar.complete();
    };

 $scope.gridOptions = {
        data: 'myData',
        virtualizationThreshold: 50,
        enableRowSelection: false,
        enablePaging: false,
        enableSorting: false,
        showFooter: false,
        pagingOptions: $scope.pagingOptions,
        filterOptions: $scope.filterOptions,
    }

可以做什么?

1 回复 | 直到 9 年前

Anthony Garant 9 年前

你可以使用ngInfiniteScroll( https://sroze.github.io/ngInfiniteScroll/index.html )并应用以下策略。

在您的控制器中

    $scope.limit = 50; // Initial limit (make sure its enough to cover the whole page, otherwise the raiseLimit function might not be called)
    $scope.raiseLimit = function() { // function called by ngInfiniteScroll
         if ( $scope.limit < data.length) {
             $scope.limit += 10; // adjust to your need
         } else {
             $scope.dataLoaded = true;
         }
    }
    $scope.dataLoaded = false; // prevent useless call
    $scope.myData = $filter('limitTo')(data, $scope.limit); // Do not forget to inject $filter into your controller

在您的html中

    <div infinite-scroll='raiseLimit()' infinite-scroll-disabled='dataLoaded'>
        <!-- put your grid with dynamic height here -->
    </div>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

4 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

4 月前

Alex · 在轻量级中同时解构和不解构变量

4 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

4 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

4 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

4 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

user3472810 · Angular@Output/EventEmitter返回undefined

5 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

5 月前