Angular2 PrimeNG分页模块学习


Posted in Javascript onJanuary 14, 2017

Angular2 PrimeNG源码学习

Paginator分页组件

GITHUB地址

首先分析一下分页功能的需求:

  1. 由父组件传入数据总数量,每页显示数量,可自定义初始页
  2. 由父组件传入分页按钮个数
  3. 有第一页,上一页,下一页,最后一页按钮
  4. 可在页面选择性更改每页显示数量

HTML模板代码:
部分代码片段

第一页按钮:

 <a href="#" #firstlink class="ui-paginator-first ui-paginator-element ui-state-default ui-corner-all" (mouseenter)="hoveredItem = $event.target" (mouseleave)="hoveredItem = null" (click)="changePageToFirst($event)" [ngClass]="{'ui-state-disabled':isFirstPage(), 'ui-state-hover':(firstlink === hoveredItem && !isFirstPage())}" [tabindex]="isFirstPage() ? -1 : null"> <span class="fa fa-step-backward"></span> </a> 

这段代码涉及几个事件。
1.鼠标移入移出更改hoveredItem变量,并以此更改样式
2.点击click事件,调用changePageToFirst(event)处理

上一页,下一页,最后一页和第一页类似

分页按钮:

<span class="ui-paginator-pages">

     <a href="#" #plink *ngFor="let pageLink of pageLinks" class="ui-paginator-page ui-paginator-element ui-state-default ui-corner-all"(mouseenter)="hoveredItem = $event.target" (mouseleave)="hoveredItem = null" (click)="changePage(pageLink - 1, $event)"

     [ngClass]="{'ui-state-hover':(plink === hoveredItem), 'ui-state-active': (pageLink-1 == getPage())}">{{pageLink}}

     </a>

 </span>
 

分页按钮是通过*ngFor从分页按钮数组中循环出来的,所以我们需要去确定这个数组

下面处理数组,和各个按钮的事件

//每页显示条目,默认0
@Input() rows: number = 0;
//显示分页按钮数量,默认5
@Input() pageLinkSize: number = 5;
//点击按钮后向父组件发送事件
@Output() onPageChange: EventEmitter<any> = new EventEmitter();
//调整每页显示条目数量的下拉菜单
@Input() rowsPerPageOptions: number[];
//定义分页按钮
pageLinks: number[];
_totalRecords: number = 0;
_first: number = 0;
//数据总数
@Input() get totalRecords(): number {
 return this._totalRecords;
}
set totalRecords(val: number) {
 this._totalRecords = val;
 this.updatePageLinks();
}
//高亮按钮位置
@Input() get first(): number {
 return this._first;
}
set first(val: number) {
 this._first = val;
 this.updatePageLinks();
}
//获取一共多少页
getPageCount() {
 return Math.ceil(this.totalRecords / this.rows) || 1;
}

//获取当前页,0为第一页
getPage(): number {
 return Math.floor(this.first / this.rows);
}

//是否为第一页
isFirstPage(): boolean {
 return this.getPage() === 0;
}

//是否为最后一页
isLastPage(): boolean {
 return this.getPage() === this.getPageCount() - 1;
}
//确定当先需要显示的起始分页和结束分页
calculatePageLinkBoundaries() {
 let numberOfPages = this.getPageCount();
 let visiblePages = Math.min(this.pageLinkSize, numberOfPages);
 let start = Math.max(0, Math.ceil(this.getPage() - (visiblePages / 2)));
 let end = Math.min(numberOfPages - 1, start + visiblePages - 1);

 const delta = this.pageLinkSize - (end - start + 1);
 start = Math.max(0, start - delta);
 return [start, end];
}

//更新需要显示的分页条目
updatePageLinks(): void {
 this.pageLinks = [];
 let boundaries = this.calculatePageLinkBoundaries;
 const start = boundaries[0];
 const end = boundaries[1];
 for (let i = start; i <= end; i++) {
  this.pageLinks.push(i + 1);
 }
}

//点击分页
changePage(p: number, event) {
 var pageCount = this.getPageCount();
 if (p > 0 && p < pageCount) {
  this.first = this.rows * p;
  const state = {
   page: p,
   first: this.first,
   rows: this.rows,
   pageCount: pageCount
  };
  this.updatePageLinks();

  this.onPageChange.emit(state);
 }
 if (event) {
  event.preventDefault();
 }
}
//第一页
changePageToFirst(event){
 this.changePage(0,event);
}

//上一页
changePageToPrev(event){
 this.changePage(this.getPage() - 1,event);
}

//下一页
changePageToNext(event){
 this.changePage(this.getPage() + 1,event);
}

//最后一页
changePageToLast(event){
 this.changePage(this.getPageCount() - 1,event);
}

//通过下拉菜单更改每页显示数量
onRppChange(event){
 this.rows = this.rowsPerPageOptions[event.target.selectedIndex];
 this.changePageToFirst(event);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
28个JS验证函数收集
Mar 02 Javascript
Jquery Validation插件防止重复提交表单的解决方法
Mar 05 Javascript
StringTemplate遇见jQuery冲突的解决方法
Sep 22 Javascript
javascript十六进制及二进制转化的方法
May 06 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
JQuery点击行tr实现checkBox选中的简单实例
May 26 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 Javascript
Jquery删除css属性的简单方法
Dec 04 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
Preload基础使用方法详解
Feb 03 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
Mar 19 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 #Javascript
详解jQuery事件
Jan 13 #Javascript
js实现固定宽高滑动轮播图效果
Jan 13 #Javascript
JavaScript利用闭包实现模块化
Jan 13 #Javascript
Vue.js基础知识小结
Jan 13 #Javascript
canvas实现流星雨的背景效果
Jan 13 #Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 #Javascript
You might like
php Static关键字实用方法
2010/06/04 PHP
php组合排序简单实现方法
2016/10/15 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
javascript动画效果类封装代码
2007/08/28 Javascript
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
2011/09/19 Javascript
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
了不起的node.js读书笔记之node.js中的特性
2014/12/22 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
2018/03/01 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
Python开发编码规范
2006/09/08 Python
python文件读写并使用mysql批量插入示例分享(python操作mysql)
2014/02/17 Python
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
Python3enumrate和range对比及示例详解
2019/07/13 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
jupyter notebook实现显示行号
2020/04/13 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
Blue Nile中国官网:全球知名的钻石和珠宝网络零售商
2020/03/22 全球购物
综艺节目策划方案
2014/06/13 职场文书
公司庆典主持词
2015/07/04 职场文书
教师个人工作总结范文2015
2015/10/14 职场文书
导游词之天津古文化街
2019/11/09 职场文书
MySQL 表空间碎片的概念及相关问题解决
2021/05/07 MySQL