angularjs - Angular ui-grid 表格、客户端分页和滚动

Question

我正在尝试将一个小项目从 jquery 移植到 angularjs。我正在使用 DataTables 绘制从我的虚拟机接收到的诊断数据，这是一个示例:



DataTables 可以很容易地对数据进行分页，这样做的好处是在导航时不会捕获鼠标滚动，这是当您的页面包含大量表格时的最佳解决方案。我现在正在尝试使用来自 angular-ui 的 ui-grid 做同样的事情，但是 ng-grid 中存在的分页选项不再存在(或者至少我无法找到它们)。

有没有办法使用 ui-grid 进行客户端分页？当不需要滚动表格时，有没有办法避免陷入鼠标滚动？如果没有，我只需要切换回 ng-grid。

Answer 1

所以我不能详细解释每一步，但这是我让它工作的方式:

将分页依赖添加到您的模块

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

在 Controller 中禁用滚动条并设置 rowsPerPage:

$scope.gridOptions.enableScrollbars = false;
$scope.gridOptions.rowsPerPage = 15;

不要忘记注册 API(也在 Controller 中):

$scope.gridOptions.onRegisterApi = function (gridApi) {
    $scope.gridApi = gridApi;
}

将 ui-grid-pagination-Directive 添加到您的表格中

<div ui-grid="gridOptions" ui-grid-pagination class="grid" external-scopes="$scope"></div>

现在在您的 HTML-Partial 中添加按钮(我使用了 Fontawesome 和 Bootstrap，但您不必这样做):

<button type="button" class="btn btn-default" ng-click="gridApi.pagination.previousPage()">
    <span class="fa fa-angle-left"></span>
</button>
<span>Page: {{ gridApi.pagination.getPage() }}</span>
<span>/ {{ gridApi.pagination.getTotalPages() }}</span>
<button type="button" class="btn btn-default" ng-click="gridApi.pagination.nextPage()">
    <span class="fa fa-angle-right"></span>
</button>

就是这样!

嘿，刚刚在来源中找到了另一种方法:

gridApi.pagination.seek(page);

还想提一下，我使用的是 ui-grid v3.0.0-rc.12