我正在使用角度ui-grid 3.2.5
以下是gridoptions
$scope.gridOptions = {
infiniteScrollRowsFromEnd: 40,
infiniteScrollUp: true,
infiniteScrollDown: true,
enableColumnMenus: false, // Remove hide columns options
columnDefs: $scope.myDefs,
data: 'data',
onRegisterApi: function (gridApi) {
gridApi.infiniteScroll.on.needLoadMoreData($scope, $scope.getDataDown);
gridApi.infiniteScroll.on.needLoadMoreDataTop($scope, $scope.getDataUp);
$scope.gridApi = gridApi;
}
};
function updateGrid(filteredData) {
$scope.response = filteredData;
$scope.firstPage = 1;
$scope.lastPage = 1;
$scope.totalPages = Math.ceil($scope.response.length / $scope.pageSize);
$scope.gridApi.infiniteScroll.setScrollDirections(false, false);
$scope.data = [];
$scope.data = $scope.response.slice(0, $scope.pageSize);
$timeout(function () {
$scope.gridApi.infiniteScroll.resetScroll($scope.firstPage > 0, $scope.lastPage < $scope.totalPages);
});
};
当我们正在执行滚动gridApi.infiniteScroll.on.needLoadMoreData($scope, $scope.getDataDown);
运行良好但我们正在推送新数据时,网格$scope.$watch( 'data', updateGrid);
中的数据更改然后滚动结束gridApi.infiniteScroll.on.needLoadMoreData没有calles getDataDown方法&滚动停止,虽然有更多的数据。
可能有什么问题?
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.infiniteScroll']);
app.controller('MainCtrl', function ($scope, $http, $timeout) {
var vm = this;
vm.gridOptions = {
infiniteScrollRowsFromEnd: 40,
infiniteScrollUp: true,
infiniteScrollDown: true,
columnDefs: [
{ name:'id'},
{ name:'name' },
{ name:'age' }
],
data: 'data',
onRegisterApi: function(gridApi){
gridApi.infiniteScroll.on.needLoadMoreData($scope, getDataDown);
gridApi.infiniteScroll.on.needLoadMoreDataTop($scope, getDataUp);
vm.gridApi = gridApi;
}
};
$scope.data = [];
vm.firstPage = 2;
vm.lastPage = 2;
function getFirstData() {
return $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pageshttps://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/10000_complex.json')
.then(function(response) {
var newData = getPage(response.data, vm.lastPage);
$scope.data = $scope.data.concat(newData);
});
}
function getDataDown() {
return $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pageshttps://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/10000_complex.json')
.then(function(response) {
vm.lastPage++;
var newData = getPage(response.data, vm.lastPage);
vm.gridApi.infiniteScroll.saveScrollPercentage();
$scope.data = $scope.data.concat(newData);
return vm.gridApi.infiniteScroll.dataLoaded(vm.firstPage > 0, vm.lastPage < 4).then(function() {checkDataLength('up');});
})
.catch(function(error) {
return vm.gridApi.infiniteScroll.dataLoaded();
});
}
function getDataUp() {
return $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pageshttps://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/10000_complex.json')
.then(function(response) {
vm.firstPage--;
var newData = getPage(response.data, vm.firstPage);
vm.gridApi.infiniteScroll.saveScrollPercentage();
$scope.data = newData.concat($scope.data);
return vm.gridApi.infiniteScroll.dataLoaded(vm.firstPage > 0, vm.lastPage < 4).then(function() {checkDataLength('down');});
})
.catch(function(error) {
return vm.gridApi.infiniteScroll.dataLoaded();
});
}
function getPage(data, page) {
var res = [];
for (var i = (page * 100); i < (page + 1) * 100 && i < data.length; ++i) {
res.push(data[i]);
}
return res;
}
function checkDataLength( discardDirection) {
// work out whether we need to discard a page, if so discard from the direction passed in
if( vm.lastPage - vm.firstPage > 3 ){
// we want to remove a page
vm.gridApi.infiniteScroll.saveScrollPercentage();
if( discardDirection === 'up' ){
$scope.data = $scope.data.slice(100);
vm.firstPage++;
$timeout(function() {
// wait for grid to ingest data changes
vm.gridApi.infiniteScroll.dataRemovedTop(vm.firstPage > 0, vm.lastPage < 4);
});
} else {
$scope.data = $scope.data.slice(0, 400);
vm.lastPage--;
$timeout(function() {
// wait for grid to ingest data changes
vm.gridApi.infiniteScroll.dataRemovedBottom(vm.firstPage > 0, vm.lastPage < 4);
});
}
}
}
vm.reset = function() {
vm.firstPage = 2;
vm.lastPage = 2;
// turn off the infinite scroll handling up and down - hopefully this won't be needed after @swalters scrolling changes
vm.gridApi.infiniteScroll.setScrollDirections( false, false );
$scope.data = [];
getFirstData().then(function(){
$timeout(function() {
// timeout needed to allow digest cycle to complete,and grid to finish ingesting the data
vm.gridApi.infiniteScroll.resetScroll( vm.firstPage > 0, vm.lastPage < 4 );
});
});
};
getFirstData().then(function(){
$timeout(function() {
// timeout needed to allow digest cycle to complete,and grid to finish ingesting the data
// you need to call resetData once you've loaded your data if you want to enable scroll up,
// it adjusts the scroll position down one pixel so that we can generate scroll up events
vm.gridApi.infiniteScroll.resetScroll( vm.firstPage > 0, vm.lastPage < 4 );
});
});
});
.grid {
width: 500px;
height: 400px;
}
<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular-touch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.7.1/ui-grid.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/angular-ui/bower-ui-grid/ui-grid.min.css" type="text/css">
</head>
<body ng-app="app">
<div ng-controller="MainCtrl as $ctrl">
<button id="reset" class="button" ng-click="$ctrl.reset()">Reset</button>
<span> First page: {{ $ctrl.firstPage }} Last page: {{ $ctrl.lastPage }} data.length: {{ data.length }} </span>
<div ui-grid="$ctrl.gridOptions" class="grid" ui-grid-infinite-scroll></div>
</div>
</body>
</html>
如果您可以将ui.grid更新到最新版本。我为你找到了这个例子,但是如果你不把这些函数放到getDataDown和getDataUp中,我无法修复你。
我有同样的问题,我解决了它如下。这是因为我假设你没有实现你的needLoadMoreDataTop
功能。只需添加以下代码即可。同时在网格选项中将infiniteScrollUp
设置为true。
_.invoke(gridApi, 'infiniteScroll.on.needLoadMoreDataTop', $scope , topFunction);
function topFunction() {
gridApi.infiniteScroll.dataLoaded(true,true);
}