Angular ui-grid 表格、客户端分页和滚动 [英] Angular ui-grid tables, client side pagination and scrolling

问题描述

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

I'm trying to port a small project from jquery to angularjs. I was using DataTables to plot diagnostic data received from my virtual machines, this is an example:

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

DataTables makes it easy to paginate the data, this has the benefit of not capturing the mouse scroll while navigating, which is the best solution when your pages contain a lot of tables. I'm now trying to do the same thing using ui-grid from angular-ui but the pagination options that were present in ng-grid are not present anymore (or at least I wasn't able to find them).

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

Is there a way to do client side pagination using ui-grid? And is there a way to avoid trapping the mouse scroll when there's no need to scroll the table? If not I'll just have to switch back to ng-grid.

推荐答案

所以我无法详细解释每一步，但这是我的工作方式:

So i cannot explain every step in detail, but here is the way i got it working:

为模块添加分页依赖

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

在控制器中禁用滚动条并设置rowsPerPage:

In the Controller Disable Scrollbars and set rowsPerPage:

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

不要忘记注册 API(也在控制器中):

Don't forget to register the API (also in the Controller):

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

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

Add ui-grid-pagination-Directive to your table

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

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

Now add Buttons in your HTML-Partial (i used Fontawesome and Bootstrap, but you don't have to):

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

就是这样！

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

Hey, just found another method in the sources:

gridApi.pagination.seek(page);

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

Also wanted to mention that i use ui-grid v3.0.0-rc.12

这篇关于Angular ui-grid 表格、客户端分页和滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！