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

UiGrid数据显示在分页中

  •  0
  • ZizouJd  · 技术社区  · 7 年前

    我使用UiGrid显示在端点中获得的数据。

    我不知道发生了什么事。知道吗?

    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

    谢谢

    1 回复  |  直到 7 年前
        1
  •  0
  •   Brian    7 年前

    displayName 救援财产!

    你所要做的就是改变 $scope.gridOptions.columnDefs[0].name="Test"+i 为此:

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

    http://plnkr.co/edit/eMO6MYlPC1QzAFNirfLI?p=preview