标签：angularjs directive 封装组件 分页
1）分页模板页面product_pag.html
<div style="margin-right:4px;float:right;">
<span style="color: blue; margin-right: 6px;">总 页 数
<strong class="colorred">{{pageObj.totalPage}}</strong>
</span>
<span style="color: blue; margin-right: 6px;">当前页数
<strong class="colorred">{{pageObj.currentPage}}</strong>
</span>
<button class="btn" ng-click="upPageClick()" >上一页</button>
<button class="btn" ng-click="downPageClick()">下一页</button>
</div>
2)分页指令productPageDirective.js
define(function(require, exports){
exports.define = function(md) {
md.directive(‘productPager‘,[umsBaseService‘,‘productPageService‘, function(umsBaseService, productPageService){
return{
restrict: ‘A‘,
templateUrl: ‘/icore_ums/docc/product/product_pag.html‘,
scope: {
pageObj: ‘=‘
},
link:function(scope, element, attrs){
scope.upPageClick = function(){
productPageService.upPageClick(scope.pageObj);
};
scope.downPageClick = function(){
productPageService.downPageClick(scope.pageObj);
};
}//link
};
}]);
};
});
3)分页功能服务product.productPageService.js(分页的操作都封装到这个service中)
define(function(require, exports){
exports.define = function(md) {
md.factory(‘productPageService‘, [‘umsBaseService‘,‘uiTips‘,function(umsBaseService,uiTips){
var service = {
//上一页
upPageClick: function(pageObj){
if(pageObj.objList && pageObj.objList.length){
//如果当前也为第一页，就不允许翻页
if(pageObj.currentPage==1){
return;
}
pageObj.currentPage--;
var currentLine = (pageObj.currentPage-1) * pageObj.pageSize;
//初始化
pageObj.resultList = [];
for(var count=0;count < pageObj.pageSize;count++){
var plan = pageObj.objList[currentLine];
pageObj.resultList.push(plan);
currentLine++;
}//for
//获取总页数
var number = (pageObj.objList.length / pageObj.pageSize);
pageObj.totalPage = Math.ceil(number);//向上取整
}//if
},
//下一页
downPageClick: function(pageObj){
if(pageObj.objList && pageObj.objList.length){
//当前也初始化为1
//当前页乘以页面大小，等于要开始显示的行
pageObj.currentPage++;
var currentLine = (pageObj.currentPage-1) * pageObj.pageSize;
//如果当前行已经到数据的最大值的话，将直接返回
var size = pageObj.objList.length-1;
if(currentLine > size){
pageObj.currentPage--;
return;
}
//初始化
pageObj.resultList = [];
for(var count=0;count < pageObj.pageSize;count++){
//如果当前等于集合的最大值了，表明此页不够页数据,直接退出
if(currentLine > pageObj.objList.length-1){
break;
}
var plan = pageObj.objList[currentLine];
pageObj.resultList.push(plan);
currentLine++;
}//for
//获取总页数
var number = (pageObj.objList.length / pageObj.pageSize);
pageObj.totalPage = Math.ceil(number);//向上取整
}//if
},
//显示第一页
showFirstPageContent: function(pageObj){
if(pageObj.objList){
//始终查询第一页内容
pageObj.currentPage = 1;
//如果要查询的集合为空
if(!pageObj.objList.length){
//清空当前也内容
pageObj.totalPage = 0;
pageObj.currentPage = 0;
pageObj.resultList = [];
return;
}
//获取总页数
var number = (pageObj.objList.length / pageObj.pageSize);
pageObj.totalPage = Math.ceil(number);//向上取整
var currentLine = (pageObj.currentPage-1) * pageObj.pageSize;
pageObj.resultList = [];
for(var count=0;count < pageObj.pageSize;count++){
//如果当前等于集合的最大值了，表明此页不够页数据,直接退出
if(currentLine > pageObj.objList.length-1){
break;
}
var plan = pageObj.objList[currentLine];
pageObj.resultList.push(plan);
currentLine++;
}//for
}//if
},
//获取中页数
getTotalPage: function(pageObj){
var number = (pageObj.objList.length / pageObj.pageSize);
//Math.ceil() 向上取整
//Math.floor() 向下取整
//Math.round() 四舍五入
pageObj.totalPage = Math.ceil(number);//向上取整
}
};
return service;
}]);
};
});
4) 在对应的页面上使用简单的分页展示功能：
<%@ include file="../common/h.jsp"%>
<body ng-controller="addPlanSeriesCtrl" class="ng-cloak">
<div id="content">
<form name="planSerisForm">
<div class="container-fluid">
<div class="widget-box">
<div class="widget-title">
<h5>险种责任投保规则</h5>
<div style="padding-top:4px;" product_pager=""
page-obj="pageObj"></div>
<!-- 这里引入分页组件，下面的table展示分页后，当前页面要展示的数据集合--->
</div>
<div style="height:450px;overflow-y:auto;">
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th>是否主险</th>
<th>险种码/版本</th>
<th>险种名称</th>
<th colspan="4" style="padding-left:20px; text-align:left;">
<span style="width:100px;display:inline-block; padding-left:10px;">责任码</span>
<span style="width:200px;display:inline-block; padding-left:10px;">责任名称</span>
<span style="width:100px;display:inline-block; padding-left:10px;">最低保额</span>
<span style="width:100px;display:inline-block; padding-left:10px;">最高保额</span>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="plan in pageObj.resultList">
<td ><input type="checkbox" ng-model="plan.isMainPlan" ng-click="clickMainPlan(plan)"></td>
<td >{{plan.planCode}} / {{plan.version}}</td>
<td >{{plan.planChineseName}}</td>
<td colspan="4">
<div ng-repeat="duty in plan.planDutyList"
style="width:100%; text-align:left;
padding-top:2px;padding-bottom:5px;
border-bottom:1px solid #ddd;">
<span style="width:100px;display:inline-block; padding-left:20px;">{{duty.dutyCode}}</span>
<span style="width:200px;display:inline-block; padding-left:10px;">{{duty.dutyName}}</span>
<span style="width:83px;display:inline-block; padding-left:10px;">
<input type="text" style="width:80px;" ng-model="duty.minimumAmount"/>
</span>
<span style="width:83px;display:inline-block; padding-left:10px;">
<input type="text" style="width:80px;" ng-model="duty.maximumAmount"/>
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</form>
</div>
<%@ include file="../common/script.jsp" %>
<script language="javascript">
seajs.use("../../js/componentDefine/addPlanSeries");
</script>
</body>
5) 对应的使用页面对应的js文件
define(function(require){
var Utils = require(‘utils‘);
var PFConstants = require(‘./productConstants.js‘);
require(‘../../js/common/ums.base‘).init();
require(‘../../js/common/ums.view‘).init();
var md = angular.module("addPlanSeries",[‘ng.ui‘,‘ums.base‘,‘ums.view‘]);
require(‘../common/ums.productClass.js‘).define(md);
require(‘./directives/setMainAddtionPlanRelDirective.js‘).define(md);
//分页显示对应的服务以及指令文件
require(‘./directives/product.productPageService.js‘).define(md);
require(‘./directives/productPageDirective.js‘).define(md);
md.controller(‘addPlanSeriesCtrl‘,function($scope,umsBaseService,uiValid,uiTips,uiPortalUtils,productPageService){
// $scope.productClasses = PFConstants.MANAGE_TYPES;
$scope.productClasses = [];
$scope.regulatorTypes = PFConstants.REPORT_TYPES;
$scope.planOPDiv = true;
$scope.view={
isShowSetMainAddtionPlanRelDialog: false
};
$scope.mainPlanList = [];
$scope.addtionPlanList = [];
$scope.mainAddtionPlanList = [];
$scope.productClass =‘‘;
$scope.targetTypes = [];
$scope.rightProductList = [];
$scope.planDutyDTOList = [];
$scope.planList = [];
//分页对象
$scope.pageObj={
objList: [], //需要分页显示的数据集合
resultList: [], //当前页面显示的数据列表
currentPage: 1, //当前页，初始化为1
totalPage: 0, //总页数
pageSize: 20 //页面大小
};
//确认按钮
$scope.confirmPlanList = function() {
//如果对象不存在，初始化
if(!$scope.rightProductList){
$scope.rightProductList =[];
}
//var planDTOList = angular.copy($scope.rightProductList);
//初始化化要分页显示的数据（这里是对象引用）
$scope.pageObj.objList = $scope.rightProductList;
//调用分页服务中的功能：显示第一页
productPageService.showFirstPageContent($scope.pageObj);
};
});//end controler
angular.bootstrap(document,[‘addPlanSeries‘]);
});
标签：angularjs directive 封装组件 分页
原文地址：http://6817977.blog.51cto.com/6807977/1620130
