为什么 ui-grid 分页看起来这么歪？
Why does ui-grid pagination look so crooked?
这是我当前的代码：
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>
这里有原帖link作为参考：http://plnkr.co/edit/unizPGE4JCFxr5e5jQut?p=preview
我得到的结果如下图所示。如您所见，分页区域似乎是 "broken"，大小和对齐方式错误。
为什么分页这么歪？我能用它做什么？
如果您不需要此分页控件，可以通过在 gridOptions 中添加 enablePaginationControls false 来隐藏它。
并且可以使用 'uib-pagination' 等其他组件进行外部分页。
好吧，让我开始吧。
首先，您使用的是 angular 1.2.26 和 ui-grid 的发行版。虽然这似乎不会触发任何渲染问题，但 UI-Grid 的官方页面宣传了 Angularjs 版本 1.4.x 到 1.6.x 的兼容性。如果您打开开发人员工具栏，您实际上可以看到报告的错误正因为如此。
（$scope.$applyAsync 已添加到 Angularjs，从版本 1 开始。3.x。相关信息 here）
我建议您升级到兼容的 angularjs 版本以避免进一步的问题。由于您还使用 $http.success() 构造，它在 angularjs 1.4.3 之后被删除，您最好的选择是坚持使用该版本。
至于分页渲染的问题，貌似是页码输入框大小不对造成的对齐错误。我将您的示例与官方 UI-Grid 主页上的示例进行了比较，发现在您的情况下，输入似乎缺少 box-sizing: border-box 设置。因此，指定的 height: 26px; 属性将不包括项目填充：因此，在 UI-Grid 示例中，输入将是 26 像素高 ，包括 5px padding，在你的plunker中，padding被添加到高度，导致26+5+5 px的高输入，明显高于线上的任何其他元素。
根据我的观察，原始样本上的 border-box 设置来自 bootstrap-flatly.min.css。我没有发现任何关于 bootstrap begin an explicit requirement for paging support 的通知，但我不排除它。无论如何，在您的特定情况下，在输入中添加缺少的属性就足够了。
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;
}
这是结果：
仍然不是很好，但它似乎与我在官方网站上看到的结果相同：
作为最后通知，请考虑分页 api 目前似乎仍处于早期 alpha 阶段（参见：http://ui-grid.info/docs/#!/tutorial/214_pagination），因此它可能尚不适合您的需要或现任市长错误。
这是我当前的代码：
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>
这里有原帖link作为参考：http://plnkr.co/edit/unizPGE4JCFxr5e5jQut?p=preview
我得到的结果如下图所示。如您所见，分页区域似乎是 "broken"，大小和对齐方式错误。
为什么分页这么歪？我能用它做什么？
如果您不需要此分页控件，可以通过在 gridOptions 中添加 enablePaginationControls false 来隐藏它。
并且可以使用 'uib-pagination' 等其他组件进行外部分页。
好吧，让我开始吧。
首先，您使用的是 angular 1.2.26 和 ui-grid 的发行版。虽然这似乎不会触发任何渲染问题，但 UI-Grid 的官方页面宣传了 Angularjs 版本 1.4.x 到 1.6.x 的兼容性。如果您打开开发人员工具栏，您实际上可以看到报告的错误正因为如此。
（$scope.$applyAsync 已添加到 Angularjs，从版本 1 开始。3.x。相关信息 here）
我建议您升级到兼容的 angularjs 版本以避免进一步的问题。由于您还使用 $http.success() 构造，它在 angularjs 1.4.3 之后被删除，您最好的选择是坚持使用该版本。
至于分页渲染的问题，貌似是页码输入框大小不对造成的对齐错误。我将您的示例与官方 UI-Grid 主页上的示例进行了比较，发现在您的情况下，输入似乎缺少 box-sizing: border-box 设置。因此，指定的 height: 26px; 属性将不包括项目填充：因此，在 UI-Grid 示例中，输入将是 26 像素高 ，包括 5px padding，在你的plunker中，padding被添加到高度，导致26+5+5 px的高输入，明显高于线上的任何其他元素。
根据我的观察，原始样本上的 border-box 设置来自 bootstrap-flatly.min.css。我没有发现任何关于 bootstrap begin an explicit requirement for paging support 的通知，但我不排除它。无论如何，在您的特定情况下，在输入中添加缺少的属性就足够了。
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;
}
这是结果：
仍然不是很好，但它似乎与我在官方网站上看到的结果相同：
作为最后通知，请考虑分页 api 目前似乎仍处于早期 alpha 阶段（参见：http://ui-grid.info/docs/#!/tutorial/214_pagination），因此它可能尚不适合您的需要或现任市长错误。