Angular2 PrimeNG分頁模塊知識分析

ADVERTISEMENT

Angular2 PrimeNG分頁模塊知識分析

Angular2 PrimeNG源碼學習

Paginator分頁組件

GITHUB地址

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

由父組件傳入數據總數量,每頁顯示數量,可自定義初始頁

由父組件傳入分頁按鈕個數

有第一頁,上一頁,下一頁,最後一頁按鈕

可在頁面選擇性更改每頁顯示數量

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())}">

</a>

</span>

 

分頁按鈕是通過*ngFor從分頁按鈕數組中循環出來的,所以我們需要去確定這個數組

ADVERTISEMENT

下面處理數組,和各個按鈕的事件

//每頁顯示條目,默認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();

}

ADVERTISEMENT

//獲取一共多少頁

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 = [];

ADVERTISEMENT

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)

//上一頁

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