bestsource

각도 UI 그리드 'gridApi.infiniteScroll.on.needLoadMoreData'가 데이터 변경과 함께 작동하지 않음

bestsource 2023. 3. 15. 19:48
반응형

각도 UI 그리드 'gridApi.infiniteScroll.on.needLoadMoreData'가 데이터 변경과 함께 작동하지 않음

사용하고 있다angular-ui-grid3.2.5

를 사용한 스크롤gridApi.infiniteScroll.on.needLoadMoreData($scope, $scope.getDataDown)정상적으로 동작하고 있습니다만, 새로운 데이터를 푸시 하고 있을 때는, 이 데이터를 경유해 그리드의 데이터가 변경되고 있습니다.$scope.$watch('data', updateGrid), 스크롤의 마지막에gridApi.infiniteScroll.on.needLoadMoreData전화하지 않다getDataDown더 많은 데이터가 있더라도 메서드와 스크롤이 중지됩니다.

여기 있습니다.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;
  }
};

여기 있습니다.updateGrid()실행

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);
  });
};

무엇이 문제일까요?

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> &nbsp; &nbsp; First page: {{ $ctrl.firstPage }} &nbsp; &nbsp; Last page: {{ $ctrl.lastPage }}  &nbsp; &nbsp; 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);
}


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 = 5;
  vm.lastPage = 5;

  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 < 5).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 < 5).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 < 5);
        });
      } 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 = 5;
    vm.lastPage = 5;

    // 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 < 5 );
      });
    });
  };

  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 < 5 );
    });
  });
});
.grid {
  width: 400px;
  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> &nbsp; &nbsp; First page: {{ $ctrl.firstPage }} &nbsp; &nbsp; Last page: {{ $ctrl.lastPage }}  &nbsp; &nbsp; data.length: {{ data.length }} </span>
  <div ui-grid="$ctrl.gridOptions" class="grid" ui-grid-infinite-scroll></div>
</div>
  </body>
</html>

언급URL : https://stackoverflow.com/questions/40782277/angular-ui-grid-gridapi-infinitescroll-on-needloadmoredata-doesnt-work-with-c

반응형

'bestsource' 카테고리의 다른 글

WordPress의 Users Admin 페이지에 사용자 정의 사용자 메타 추가  (0) 2023.03.15
명시적 주석을 사용하지 않는 각도를 수정하는 방법 및 엄격한 모드에서 호출할 수 없습니다.  (0) 2023.03.15
JSON을 추상 클래스로 역직렬화하는 중  (0) 2023.03.15
Oracle 쿼리 실행 시간  (0) 2023.03.15
모든 요청에 대한 AngularJS $http 사용자 지정 헤더  (0) 2023.03.15

'bestsource'의 다른글

  • 현재글각도 UI 그리드 'gridApi.infiniteScroll.on.needLoadMoreData'가 데이터 변경과 함께 작동하지 않음

관련글

댓글

티스토리툴바