为什么ui-grid分页看起来如此歪曲？

时间：2018-01-22 09:10:34

标签： angularjs ui-grid

这是我目前的代码：

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

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

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

  getPage();
}
]);
.grid {
  width: 600px;
}
<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"></script>

    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

<div ng-controller="MainCtrl">
  <div ui-grid="gridOptions" ui-grid-pagination class="grid"></div>
</div>


    <script src="app.js"></script>
  </body>
</html>

以下是原始的plunker链接作为参考：http://plnkr.co/edit/unizPGE4JCFxr5e5jQut?p=preview

我得到的结果显示在下图中。正如您所看到的那样，分页区域似乎“破碎”，错误的大小调整和对齐。

enter image description here

为什么分页如此歪曲？我该怎么办？

2 个答案:

答案 0 :(得分：1)

如果您不需要此分页控件，则可以通过在gridOptions中添加keycloakPromise<KeycloakProfile>(keycloak.loadUserProfile()) .then(userProfile => ...) .catch(() => ...) false来隐藏此功能。

并且可以使用其他组件，例如＆ube-pagination＆＃39;外部分页。

答案 1 :(得分：1)

好吧，让我开始吧。

首先，你使用角度1.2.26和ui-grid的发布版本。虽然这似乎没有触发任何渲染问题，但UI-Grid的官方页面宣称Angularjs 1.4.x版的兼容性为1.6.x.如果您打开开发人员工具栏，您实际上可以看到因此而报告的错误。

enter image description here

（$ scope。$ applyAsync从版本1.3.x开始添加到Angularjs。相关信息here）

我建议您升级到兼容的angularjs版本以避免进一步的问题。由于您还使用$http.success()构造，该构造在angularjs 1.4.3之后被删除，您最好的选择是坚持使用该版本。

对于寻呼机渲染问题，似乎错误的对齐是由页码输入框的大小错误引起的。我将您的示例与官方UI-Grid主页上的示例进行了比较，并注意到在您的情况下输入似乎缺少box-sizing: border-box设置。因此，指定的height: 26px;属性将不包含项填充：因此，在UI-Grid示例中，输入将是26 px高包括 5px填充，在您的plunker中填充增加到高度，导致26 + 5 + 5 px高输入，明显高于线上任何其他元素。
根据我的观察，原始样本的border-box设置来自bootstrap-flatly.min.css。我没有发现任何关于bootstrap的通知开始明确要求分页支持，但我不排除它。无论如何，在您的特定情况下，在输入上添加缺少的属性应该足够了。

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

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

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

  getPage();
}
]);
.grid {
  width: 600px;
}

.ui-grid-pager-control-input{
  box-sizing: border-box !important;
}
<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>

    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

<div ng-controller="MainCtrl">
  <div ui-grid="gridOptions" ui-grid-pagination class="grid"></div>
</div>


    <script src="app.js"></script>
  </body>
</html>

正如您在上面的示例中所看到的，我将引用的angularjs文件版本切换为1.4.3并添加了以下css规则：

.ui-grid-pager-control-input{
      box-sizing: border-box !important;
}

结果如下：

enter image description here

仍然不是很好，但它似乎与我在官方网站上看到的结果相同： enter image description here

作为最后的通知，请考虑目前的分页api似乎仍处于早期alpha阶段（请参阅：http://ui-grid.info/docs/#!/tutorial/214_pagination），因此它可能还不适合您的需要或目前的市长错误。

相关问题
最新问题