Fatal编程技术网
  • angularjs/
  • Angularjs 禁用uiGrid上的下一页

Angularjs 禁用uiGrid上的下一页

angularjs

Angularjs 禁用uiGrid上的下一页,angularjs,angular-ui-grid,ui-grid,Angularjs,Angular Ui Grid,Ui Grid,我正在使用外部分页和用户界面网格以及angularjs 服务器目前有70个项目被模拟，但我不知道服务器上的项目数。 页面大小设置为50 所以它应该有两页（一页上有50个项目，一页上有20个项目） 下一页的按钮在第二页上未禁用，但在第三页上，当网格中没有要显示的项目时，该按钮处于禁用状态 我想在第二页禁用它 链接到plunk： app.js var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.selection', 'ui

我正在使用外部分页和用户界面网格以及angularjs

服务器目前有70个项目被模拟，但我不知道服务器上的项目数。 页面大小设置为50

所以它应该有两页（一页上有50个项目，一页上有20个项目）

下一页的按钮在第二页上未禁用，但在第三页上，当网格中没有要显示的项目时，该按钮处于禁用状态

我想在第二页禁用它

链接到plunk：

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);
}]);

var-app=angular.module（'app'，['ngTouch'，'ui.grid'，'ui.grid.selection'，'ui.grid.pagination']）；
应用程序服务（'foo'，['$q'，函数（$q）{
var项目=[]；
对于（变量i=0；i<70；i++）{
推({
“名字”：“名字”+i，
“姓氏”：“姓氏”+i，
“公司”：“公司”+i，
“已雇用”：i%4==0
});
}
this.bar=函数（页面，页面大小）{
var deferred=$q.deferred（）；
var start=（第1页）*页面大小；
deferred.resolve（items.slice（start，start+pageSize））；
回报。承诺；
};
归还这个；
}]);
app.controller（'MainCtrl'、['$scope'、'$http'、'$log'、'$timeout'、'uiGridConstants'、'foo'，函数（$scope、$http、$log、$timeout、uiGridConstants、foo）{
变量分页选项={
页码：1，
页面大小：50，
排序：空
};
$scope.selectedds=[]；
$scope.gridOptions=getOptions（）；
函数getOptions（）{
返回{
启用水平滚动条：0，
启用垂直滚动条：2，
enableRowSelection:true，
enableFullRowSelection:true，
多选：对，
分页页面大小：[50100]，
分页页面大小：50，
useExternalPagination:true，
onRegisterApi:函数（gridApi）{
$scope.gridApi=gridApi；
getPage（1,50）；
paginationChanged（$scope，function（newPage，pageSize）{
paginationOptions.pageNumber=新建页面；
paginationOptions.pageSize=页面大小；
getPage（新建页面，页面大小）；
});
}
};
}
函数getPage（页面，页面大小）{
foo.bar（页面，页面大小）
.then（功能（数据）{
$scope.gridOptions.data=数据；
$scope.gridOptions.totalItems=未定义；
});
}
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>
在您的案例中，如果
gridOptions.totalItems
，则必须给出值。这就是ui网格计算要显示多少页面的方式。我已更新了以反映这些更改。

在您的情况下，如果
gridOptions.totalItems
，则必须给出值。这就是ui网格计算要显示多少页面的方式。我已经更新了您的，以反映这些更改。

我使用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;
        });
}
这是工作方法

我使用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;
        });
}
这是工作

我知道它可以用gridOptions.totalServerItems处理，但问题是我喜欢强制禁用该按钮，因为否则它只会等待空响应。查看源代码后，似乎将
gridOptions.useCustomPagination
设置为true将获得所需的结果。ui网格文档在将
useCustomPagination
设置为true时建议如下：“如果为true，则处理
paginationChanged
事件并设置
数据
，
firstRowIndex
，
lastRowIndex
，以及
totalItems
”我知道它可以用gridOptions.totalServerItems处理，但问题是，我喜欢强制禁用该按钮，因为否则它只会等待空响应。在查看源代码后，似乎将
gridOptions设置为true。使用CustomPagination
将获得所需的结果。ui网格文档建议在将
useCustomPagination
设置为true时执行以下操作：“为true时，处理
paginationChanged
事件并设置
数据
，
firstRowIndex
，
lastRowIndex
和
totalItems
”