分页时Ui Grid数据消失

Question

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

我想在单击分页器按钮时更新 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

谢谢！

Answer 1

更改名称混淆了网格，displayName 属性来拯救！

您只需将 $scope.gridOptions.columnDefs[0].name="Test"+i 更改为：

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

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

分页时Ui Grid数据消失

UiGrid data dissappears in pagination

angularjs

angular-ui-grid

ui-grid