禁用 uiGrid 上的下一页

Question

我正在使用 外部分页 ui-grid 和 angularjs.

服务器目前模拟了 70 个项目，但我不知道服务器的项目数。 pageSize 设置为 50。

所以它应该有 2 页（一页有 50 个项目，另一页有 20 个）。

下一页的按钮在第二页上未禁用，但在网格中没有项目时在第三页上未禁用显示。

我希望在第二页禁用它！

Link 直言不讳：http://plnkr.co/edit/OuM8lN0R06Xudn1frLax?p=preview

app.js

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

app.service('foo', ['$q', function ($q) {
    var items = [];
    for (var i = 0; i < 70; i++) {
        items.push({
            "firstName": "firstName" + i,
            "lastName": "lastName" + i,
            "company": "company" + i,
            "employed": i % 4 === 0
        });
    }

    this.bar = function (page, pageSize) {
        var deferred = $q.defer();

        var start = (page - 1) * pageSize;
        deferred.resolve(items.slice(start, start + pageSize));

        return deferred.promise;
    };

    return this;
}]);

app.controller('MainCtrl', ['$scope', '$http', '$log', '$timeout', 'uiGridConstants', 'foo', function ($scope, $http, $log, $timeout, uiGridConstants, foo) {
    var paginationOptions = {
        pageNumber: 1,
        pageSize: 50,
        sort: null
    };

    $scope.selectedIds = [];

    $scope.gridOptions = getOptions();

    function getOptions() {
        return {
            enableHorizontalScrollbar: 0,
            enableVerticalScrollbar: 2,

            enableRowSelection: true,
            enableFullRowSelection: true,
            multiSelect: true,

            paginationPageSizes: [50, 100],
            paginationPageSize: 50,
            useExternalPagination: true,

            onRegisterApi: function (gridApi) {
                $scope.gridApi = gridApi;
                getPage(1, 50);

                gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
                    paginationOptions.pageNumber = newPage;
                    paginationOptions.pageSize = pageSize;
                    getPage(newPage, pageSize);
                });
            }
        };
    }

    function getPage(page, pageSize) {
        foo.bar(page, pageSize)
            .then(function (data) {
                $scope.gridOptions.data = data;
                $scope.gridOptions.totalItems = undefined;
            });
    }

    getPage(1, 50);
}]);

index.html

<!doctype html>
<html ng-app="app">

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.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 class="grid" ui-grid="gridOptions" ui-grid-pagination ui-grid-selection></div>
    </div>


    <script src="app.js"></script>
</body>

</html>

Answer 1

如果 gridOptions.totalItems，您必须给出值，在您的情况下为 70。这就是 ui-grid 计算要显示多少页的方式。我已经更新了您的 plnkr 以反映这些变化。

Answer 2

我已经通过 getPage(page, pageSize) 方法中的一个简单更改修复了它。

方法代码如下：

function getPage(page, pageSize) {
    foo.bar(page, pageSize)
        .then(function (data) {
            $scope.gridOptions.data = data;
            $scope.gridOptions.totalItems = data.length === pageSize ? undefined : (page - 1) * pageSize + data.length;
        });
}

这是工作plunk

禁用 uiGrid 上的下一页

Disable next page on uiGrid

angularjs

angular-ui-grid

ui-grid