UiGrid數據在分頁中消失

我使用UiGrid顯示我在端點中獲得的數據。UiGrid數據在分頁中消失

我想在點擊paginators按鈕時更新columnsDefs的名稱。名稱被正確更改，但是我更新的列中的數據消失了

我不知道發生了什麼。任何想法？

這裏的代碼。

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pagination']); 

    app.controller('MainCtrl', [ 
    '$scope', '$http', 'uiGridConstants', function($scope, $http, uiGridConstants) { 

     var paginationOptions = { 
     pageNumber: 1, 
     pageSize: 25, 
     sort: null 
     }; 

     var i = 0; 

     $scope.gridOptions = { 
     paginationPageSizes: [25, 50, 75], 
     paginationPageSize: 25, 
     useExternalPagination: true, 
     useExternalSorting: true, 
     columnDefs: [ 
      { name: 'name' }, 
      { name: 'gender', enableSorting: false }, 
      { name: 'company', enableSorting: false } 
     ], 
     onRegisterApi: function(gridApi) { 
      $scope.gridApi = gridApi; 
      $scope.gridApi.core.on.sortChanged($scope, function(grid, sortColumns) { 
      if (sortColumns.length == 0) { 
       paginationOptions.sort = null; 
      } else { 
       paginationOptions.sort = sortColumns[0].sort.direction; 
      } 
      getPage(); 
      }); 
      gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) { 
      paginationOptions.pageNumber = newPage; 
      paginationOptions.pageSize = pageSize; 
      getPage(); 
      test(); 
      $scope.gridOptions.columnDefs[0].name="Test"+i; 
      gridApi.core.notifyDataChange(uiGridConstants.dataChange.ALL); 
      gridOptions.columnDefs.splice(0,gridOptions.columnDefs.length) 

      }); 
     } 
     }; 

     var test = function(){ 
     i++; 
     }; 

     var getPage = function() { 

     var url; 
     switch(paginationOptions.sort) { 
      case uiGridConstants.ASC: 
      url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100_ASC.json'; 
      break; 
      case uiGridConstants.DESC: 
      url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100_DESC.json'; 
      break; 
      default: 
      url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json'; 
      break; 
     } 

     $http.get(url) 
     .success(function (data) { 
      $scope.gridOptions.totalItems = 100; 
      var firstRow = (paginationOptions.pageNumber - 1) * paginationOptions.pageSize; 
      $scope.gridOptions.data = data.slice(firstRow, firstRow + paginationOptions.pageSize); 
      $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.ALL); 
     }); 
     }; 

     getPage(); 
    } 
    ]);

這裏是Plunker

謝謝！

來源

2017-08-17 ZizouJd

更改名稱令網格困惑，displayName屬性無法解救！

所有你必須做的是改變$scope.gridOptions.columnDefs[0].name="Test"+i這樣：

$scope.gridOptions.columnDefs[0].displayName="Test"+i;

工作plunker：http://plnkr.co/edit/eMO6MYlPC1QzAFNirfLI?p=preview

來源

2017-08-17 20:39:03 Brian

是的，你的權利。我之前看到錯誤，我沒有更新這個問題，我忘了。謝謝回答。 – ZizouJd

UiGrid數據在分頁中消失

回答

相關問題