Angular UI-Grid無限滾動/分頁不保留先前的數據

Question

我遇到的問題是，當滾動條到達底部附近時，它將調用結果集中的下100條記錄，但是，它將新的100條記錄替換為前100條記錄。無限滾動。 這是我的控制器邏輯

'use strict';

var first = angular.module('TqimApp');
first.controller('NewGridCtrl',  ['$scope', '$http', 'NewGridService', '$timeout', '$modal', '$interval', '$location', 'uiGridConstants', '$filter', '$rootScope',
function($scope, $http, NewGridService, $timeout, $modal, $interval, $location, uiGridConstants, $filter, $rootScope) {
$( "div[id^='nvtooltip']" ).css( "display" , "none");

var id, af;
$scope.headers = [];
$scope.reportQuery = {};
$scope.gridOptions = {};
$scope.pageNumber=0;
$scope.recordNumber=0;
$scope.totalItemsSize=0;
$scope.modeValue = true;
$scope.orderByColumn=null;
$scope.defaultOrderByColumn=null;
var paginationOptions = { pageNumber: 0, pageSize: 25, sort: null };
var params = [];
var whereColumn=[];
$scope.columnName=null;
$scope.columnValue=null;
$scope.gridApi=null;

var words = tokenize( location.href,  '?'); //20160221 moved, changed path to location.href
var words = splitTheSecond( words,  '&'); //20160221 moved

angular.forEach(words, function(word, idx) { //20160221 moved
    var subw = tokenize( word,  '=');
    params[subw[0]]=subw[1];
});

function tokenize( str, token ){
    if( str == null ) return null;
    var words = str.split( token );
    if( words==null || words.length<2 ) {
          console.log( "tokenize error on parsing path " + str );
          return null;
    }
    return words;
};

function splitTheSecond( arrStr, token){
    if( !$.isArray(arrStr) ) return null;
    return tokenize(arrStr[1], token);
};

$scope.grid = {
    'cd': params['cd'],
    'catCd': params['catCd'],
    'id': params['id'],
    'af': params['af'],
    'isPaged': true,
    'recordNumber': 0,
    'pageSize': 100, //20160221 added
    'pd': params['pd'],                              /* production date*/
    'pg': $scope.pageNumber,                         /* page number */
    'ps': paginationOptions.pageSize,                /* page size */
    'oc': $scope.columnName,                         /* order column name */
    'ov': $scope.columnValue,                        /* order column value */
    'order': paginationOptions.sort,                 /* ASCending or DEScending */
    'rv': params['rv'],                               /* result value*/
    's1': params['s1'],                               /* string1*/
    's2': params['s2'],                               /* string2*/
    's3': params['s3'],                               /* string3*/
    's4': params['s4'],                               /* string4*/
    's5': params['s5'],                               /* string5*/
    'month' : params['month']                         /*month*/
};

if( params.filterIds != undefined ) {
    $scope.grid.filterIds = decodeURIComponent( params.filterIds );
}
if( params.qp != undefined ) {
    var qp = decodeURIComponent( params.qp );
    $scope.grid.qp = JSON.parse(qp);
}

$scope.highlightFilteredHeader = function( row, rowRenderIndex, col, colRenderIndex ) {
    if( col.filters[0].term ){
        return 'header-filtered';
    } else {
        return '';
    }
};

$scope.gridOptions = {
     //columnDefs: $scope.headers,
     enablePaginationControls: true,
     enableFiltering: true,
     enableSorting: true,
     useExternalSorting: true,
     visible: true,
     infiniteScrollDown: true,
     infiniteScrollUp: true,
     exporterMenuCsv: true,
     exporterMenuPdf: false,
     enableGridMenu: true,
};

NewGridService.getHeaders($scope.grid.catCd).then(
          function(result)  {
                var returnArray = [];                   
                for( var i = 0; i < result.length; i++ ){
                      returnArray.push({field: result[i].key, displayName: result[i].name, 
                      enableFiltering: true,  headerCellClass: $scope.highlightFilteredHeader, 
                      filter: { term: "", }});
                }                                         
                $scope.defaultOrderByColumn = $scope.grid.catCd == 'CMP_GRD'? 'complaint_result_id' : 'test_result_id';
                $scope.headers = returnArray;
                $scope.gridOptions.columnDefs = $scope.headers;
         },
         function(error){
             console.error(error);
});

var getPage = function(whereColumn) {
    console.log('getPage');

    $scope.reportQuery.whereColumn = whereColumn;
    $scope.reportQuery.fromIndex = $scope.pageNumber;
    $scope.reportQuery.toIndex = paginationOptions.pageSize;
    $scope.reportQuery.orderByColumn = $scope.sortColumnName;
    $scope.grid.recordNumber = $scope.grid.recordNumber + $scope.grid.pageSize;

    getGridData();
    console.log('Grid Size: '+$scope.grid.recordNumber);
};

$scope.getDataDown = function() {
    if($scope.modeValue) {
        $scope.gridApi.infiniteScroll.dataLoaded().then(function() {
            getPage(whereColumn);
        }).then(function() {
            }
        );
    }
};

$scope.gridOptions.onRegisterApi = function(gridApi) {
           console.log('onRegisterApi');
           $scope.gridApi = gridApi;

           $scope.gridApi.core.on.sortChanged($scope, function(grid,  sortColumns) {
                    console.log('sort changed!');
                    console.log(sortColumns);

                    //20160221 added variable resets
                    $scope.grid.totalRecordCount = 0;
                    $scope.grid.recordNumber = 0;

                    //20160221 added block of code to refresh grid after sort
                    var sortClmnList = [];
                    if(sortColumns.length == 0) {
                        sortClmnList.push($scope.defaultOrderByColumn+" ASC");
                    } else {
                        angular.forEach(sortColumns,  function(sCriteria) {
                            sortClmnList.push(sCriteria.name+" "+sCriteria.sort.direction);
                        });
                    }
                    $scope.grid.sortCriteria = sortClmnList;

                    getGridData();
          });

          $scope.gridApi.core.on.filterChanged( $scope,  function() { //20160221 added
                console.log('filter changed!');

                //20160221 added block of code to refresh grid after filter
                var whereColumn = [];
                angular.forEach($scope.gridOptions.columnDefs,  function(obj) {
                    if(obj.visible) {
                        $scope.column.push(obj.name);
                    }
                    if(obj.filter.term!="" && obj.filter.term!=null) {
                        whereColumn.push(obj.name+","+obj.filter.term);
                    }
                });

                $scope.grid.whereColumn = whereColumn;
                $scope.totalItemsSize = $scope.gridOptions.data.length;
                console.log('$scope.grid.whereColumn='+whereColumn);
                getGridData();

        });
        gridApi.infiniteScroll.on.needLoadMoreData($scope, $scope.getDataDown);
};

function formatDates(data) {
    for (var i = 0; i < data.length; i++) {

        if(data[i].production_Date != null) {
            var currentValue = data[i].production_Date;
            var currentDate = new Date(parseInt(currentValue));
            var month = currentDate.getMonth() + 1;
            var day = currentDate.getDate();
            if( day < 10 ) {
                day = '0'+ day;
            }
            var year = currentDate.getFullYear();
            var date = month + "/" + day + "/" + year;
            data[i].production_date = date;
         }
    }        
};

function getGridData() { 
    NewGridService.getGridData($scope.grid).then(
    function(data){console.log(data);
        formatDates(data);
        $scope.gridOptions.data = data;
        $scope.totalItemsSize = $scope.totalItemsSize + $scope.gridOptions.data.length;
        $scope.gridOptions.data = $scope.gridOptions.data.concat($scope.gridOptions.data);
    },
    function(error){
        console.error(error);
    });
 }
 getGridData();

}]);

Answer 1

也許這是你的問題。

函數getGridData（）{... $ scope.gridOptions.data = data; //替換數據... $ scope.gridOptions.data = $ scope.gridOptions.data.concat（$ scope.gridOptions.data）; ...}

請參閱帶有注釋的行：因此，在將舊數據與新數據合並之前，您的先前數據將被覆蓋。

問候克里斯蒂安