Question

我刚刚开始将ui-grid实现到我的应用程序中。

我一直在关注official ui-grid documentation的分页功能，到目前为止，我无法完成它的工作。

虽然它显示了分页控件，但它不是“尊重”我在代码中输入的参数，如下所示：

$scope.setGrid = function () {

    $scope.gridOptions = {
        enablePagination: true,
        pageSize: 10,
        paginationPageSize: 10,
        paginationPageSizes: [25, 50, 75],
        enableHorizontalScrollbar: false,
        enablePaginationControls: true,
        columnDefs: [
            { name: 'name', field: 'name', type:'object', enableCellEdit: false },
            { name: 'lastName', field: 'last_name', type: 'object', enableCellEdit: false },
            { name: 'email', field: 'email', type: 'object', enableCellEdit: false },
            { name: 'creationDate', field: 'created', type: 'object', enableCellEdit: false, cellFilter: 'date:"dd/MM/yyyy HH:mm:ss"'},
            { name: 'userActive', enableCellEdit: false, field: 'active', type: 'boolean'}

        ],
        data: $scope.users
    }
}

在HTML视图中：

<div class="row">
  <div class="panel-body">
    <rd-widget-body classes="medium no-padding">
        <div id="grid1" ui-grid-pagination ui-grid="gridOptions" class="grid"></div>
    </rd-widget-body>
  </div>
</div>

在我的模块中：

angular.module('RDash', [   
 'ui.bootstrap', 
 'ui.router', 
 'ngCookies',
 'ngRoute',
 'ngResource',
 'doowb.angular-pusher',
 'xeditable',
 'ui.grid',
 'ui.grid.edit',
 'ui.grid.pagination',
 'ui.grid.resizeColumns', 
 'ui.grid.selection'
 ]);

正在发生的问题是，在我的网格中，虽然它已配置并接受分页，但分页控件已禁用，并且不接受已配置的pageSize和paginationPagesSize。

它显示的是我的数据集中的所有项目（此测试目前为35项），并且在每页项目下拉列表中显示250 | 500 | 1000，这似乎是默认配置。

似乎我忘了给某种方法打电话'整理'整个事情，但我不确定。

我确实找到了许多分页的例子，such as this one，它们都非常简单，但我似乎无法使其成功。分页虽然显示了控件，但它已被完全禁用，并且没有采用我设置的参数。

我的ui-grid版本是v4.0.11（2017-11-20），取自CHANGELOG.md

Answer 1

我发现了什么问题。所有参数都是正确的，问题是我的代码中的$ scope.setGrid（）方法是在代码实际将数据集绑定到$ scope.gridOptions.data之前调用的。我更改了运行时，只有在实际绑定发生并且一切都开始工作时才调用它。

ui-grid分页不起作用

1 个答案: