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 相关文章推荐
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
Nov 30 Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
使用JS读秒使用示例
Sep 21 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
javascript实现全角半角检测的方法
Jul 23 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
Vue.JS项目中5个经典Vuex插件
Nov 28 Javascript
深入理解vue中slot与slot-scope的具体使用
Jan 26 Javascript
jquery实现拖拽添加元素功能
Dec 01 jQuery
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变量与方法
2014/01/06 PHP
laravel安装和配置教程
2014/10/29 PHP
PHP基于PDO实现的SQLite操作类【包含增删改查及事务等操作】
2017/06/21 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
刷新时清空文本框内容的js代码
2007/04/23 Javascript
ext实现完整的登录代码
2008/08/08 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
javascript复制粘贴与clipboardData的使用
2014/10/16 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
Javascript实现可旋转的圆圈实例代码
2015/08/04 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
js实现分割上传大文件
2016/03/09 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
原生js实现简单的链式操作
2017/07/04 Javascript
vue.js实现的幻灯片功能示例
2019/01/18 Javascript
vue.js循环radio的实例
2019/11/07 Javascript
[35:43]2018DOTA2亚洲邀请赛 4.1 小组赛B组 paiN vs Effect
2018/04/03 DOTA
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
python 批量添加的button 使用同一点击事件的方法
2019/07/17 Python
python烟花效果的代码实例
2020/02/25 Python
selenium WebDriverWait类等待机制的实现
2020/03/18 Python
python实现自动打卡的示例代码
2020/10/10 Python
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
哈利波特商店:Harry Potter Shop
2018/11/30 全球购物
写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数
2016/04/13 面试题
小学校园广播稿集锦
2014/10/04 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书
免职通知
2015/04/23 职场文书
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android