从网上搜罗一个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中的,源代码如下
- <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>
- 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' }]
- };
- });