AngularJS ng-Grid CurrentPage数字无法显示

最新推荐文章于 2021-11-29 16:12:09 发布

前端琅琊阁

最新推荐文章于 2021-11-29 16:12:09 发布

阅读量3.1k

点赞数

文章标签： angularjs ng-grid

从网上搜罗一个ng-grid控件，自己动手学习时发现当前第几页没有显示，而其他的功能则一切都是OK的，原以为是我的js代码出现问题，一步步确认自己的代码没有问题后，所以我在源代码里面加了{{pagingOptions.currentPage}},但是经测试后发现currentPage是有数据的(如图一)，后来把源代码里里面的 <input class=\"ngPagerCurrent\" min=\"1\" max=\"{{maxPages()}}\" type=\"number\" style=\"width:50px; height: 24px; margin-top: 1px; padding: 0 4px;\" ng-model=\"pagingOptions.currentPage\"/> type=\"number\"改成 type=\"text\"就好了(如图二)，可是不知道为什么会这样，希望有人能解答一下

注明一下，我是先将一个子模块myApp.ctrl.dataGrid加入到模块myApp中，然后再将ngGrid到加入到myApp.ctrl.dataGrid中的，源代码如下

[html] view plain copy print ?

<style type="text/css">
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 800px;
height: 300px;
}
.green {
background-color: green;
color: white;
}
</style>
<div class="row" data-ng-controller="myController">
<div class="gridStyle" data-ng-grid="gridOptions">
</div>
</div>

[javascript] view plain copy print ?

angular
.module('myApp', [
'myApp.ctrl.dataGrid'
])
angular
.module('myApp.ctrl.dataGrid', ['ngGrid'])
.controller('myController', function ($scope) {
var self = this;
//基本数据属性
$scope.mySelections = [];
//Grid数据
$scope.myData = [];
//Grid 筛选
$scope.filterOptions = {
filterText: '',
useExternalFilter: false
};
//总共条目
$scope.totalServerItems = 0;
//设置相关页面数据
$scope.pagingOptions = {
pageSizes: [250, 500, 1000],//page 行数可选值
pageSize: 250, //每页行数
currentPage: 1, //当前显示页数
};
//操作方法设置
self.getPagedDataAsync = function (pageSize, page, searchText) {
setTimeout(function () {
var data;
if (searchText) {
var ft = searchText.toLowerCase();
data = largeLoad().filter(function (item) {
return JSON.stringify(item).toLowerCase().indexOf(ft);
});
}
else {
data = largeLoad();
}
var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
$scope.myData = pagedData;
$scope.totalServerItems = data.length;
if (!$scope.$$phase) {
$scope.$apply();
}
}, 100);
};
$scope.$watch('pagingOptions', function () {
self.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
},true);
$scope.$watch('filterOptions', function () {
self.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
},true);
self.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
$scope.gridOptions = {
data: 'myData',
selectedItems: $scope.mySelections,
showSelectionCheckbox: true,
multiSelect: true,
showGroupPanel: false,
showColumnMenu: true,
enableCellSelection: true,
enableCellEditOnFocus: true,
enablePaging: true,
showFooter: true,
totalServerItems: $scope.totalServerItems,
filterOptions: $scope.filterOptions,
pagingOptions: $scope.pagingOptions,
i18n:'zh-cn',
columnDefs: [
{ field: 'name', displayName: 'Very Long Name Title', sortable: false },
{ field: 'allowance', width: 120, aggLabelFilter: 'currency', cellTemplate: '<div ng-class="{red: row.entity[col.field] > 30}"><div class="ngCellText">{{row.entity[col.field] | currency}}</div></div>' },
{ field: 'birthday', width: '120px', cellFilter: 'date', resizable: false },
{ field: 'paid', width: '*', cellFilter: 'checkmark' }]
};
});