Таблицы Angular ui-grid, разбиение на страницы и прокрутка на стороне клиента

Я пытаюсь перенести небольшой проект с jquery на angularjs. Я использовал DataTables для построения диагностических данных, полученных от моих виртуальных машин, это пример:

Раздел мониторинга

DataTables позволяет легко разбивать данные на страницы, это имеет то преимущество, что не захватывает прокрутку мыши во время навигации, что является лучшим решением, когда ваши страницы содержат много таблиц. Теперь я пытаюсь сделать то же самое, используя ui-grid из angular-ui, но параметры разбивки на страницы, которые присутствовали в ng-grid, больше не присутствуют (или, по крайней мере, я не смог их найти).

Есть ли способ разбиения на страницы на стороне клиента с помощью ui-grid? И есть ли способ избежать захвата прокрутки мыши, когда нет необходимости прокручивать таблицу? Если нет, мне просто придется вернуться к ng-grid.


pagination angularjs angular-ui-grid
person Slartibartfast    schedule 17.09.2014    source источник
comment
Вы нашли решение этой проблемы?   -  person Igor Malyk    schedule 29.10.2014
comment
На самом деле нет, поэтому на данный момент я переключил свой проект на ng-grid.   -  person Slartibartfast    schedule 31.10.2014
comment
Я использовал обычный элемент управления разбиением на страницы из пакета начальной загрузки, но он выглядит немного странно.   -  person Igor Malyk    schedule 01.11.2014

Ответы (1)


arrow_upward
6
arrow_downward

Поэтому я не могу подробно объяснить каждый шаг, но вот как я это сделал:

Добавьте зависимость для разбивки на страницы в свой модуль

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

В контроллере отключите полосы прокрутки и установите rowsPerPage:

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

Не забудьте зарегистрировать API (также в контроллере):

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

person nabinca    schedule 11.11.2014
comment
Я дал эту ошибку: TypeError: Cannot set property 'onRegisterApi' of undefined at new <anonymous> - person Saeed Gharedaghi; 19.07.2016