Angular2 PrimeNG分頁模塊知識分析

ADVERTISEMENT

Angular2 PrimeNG分頁模塊知識分析

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>
ADVERTISEMENT

 

這段代碼涉及幾個事件。
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())}">
</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();
 }
 }
 
ADVERTISEMENT

 //第一頁
 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);
 }

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持路飯。


本文地址:
ADVERTISEMENT
ADVERTISEMENT