您好,登錄后才能下訂單哦!
小編給大家分享一下Angular2 PrimeNG分頁(yè)模塊的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
Angular2 PrimeNG源碼學(xué)習(xí)
Paginator分頁(yè)組件
GITHUB地址
首先分析一下分頁(yè)功能的需求:
由父組件傳入數(shù)據(jù)總數(shù)量,每頁(yè)顯示數(shù)量,可自定義初始頁(yè)
由父組件傳入分頁(yè)按鈕個(gè)數(shù)
有第一頁(yè),上一頁(yè),下一頁(yè),最后一頁(yè)按鈕
可在頁(yè)面選擇性更改每頁(yè)顯示數(shù)量
HTML模板代碼:
部分代碼片段
第一頁(yè)按鈕:
<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>
這段代碼涉及幾個(gè)事件。
1.鼠標(biāo)移入移出更改hoveredItem變量,并以此更改樣式
2.點(diǎn)擊click事件,調(diào)用changePageToFirst(event)處理
上一頁(yè),下一頁(yè),最后一頁(yè)和第一頁(yè)類似
分頁(yè)按鈕:
<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>
分頁(yè)按鈕是通過(guò)*ngFor從分頁(yè)按鈕數(shù)組中循環(huán)出來(lái)的,所以我們需要去確定這個(gè)數(shù)組
下面處理數(shù)組,和各個(gè)按鈕的事件
//每頁(yè)顯示條目,默認(rèn)0 @Input() rows: number = 0; //顯示分頁(yè)按鈕數(shù)量,默認(rèn)5 @Input() pageLinkSize: number = 5; //點(diǎn)擊按鈕后向父組件發(fā)送事件 @Output() onPageChange: EventEmitter<any> = new EventEmitter(); //調(diào)整每頁(yè)顯示條目數(shù)量的下拉菜單 @Input() rowsPerPageOptions: number[]; //定義分頁(yè)按鈕 pageLinks: number[]; _totalRecords: number = 0; _first: number = 0; //數(shù)據(jù)總數(shù) @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(); }
//獲取一共多少頁(yè) getPageCount() { return Math.ceil(this.totalRecords / this.rows) || 1; } //獲取當(dāng)前頁(yè),0為第一頁(yè) getPage(): number { return Math.floor(this.first / this.rows); } //是否為第一頁(yè) isFirstPage(): boolean { return this.getPage() === 0; } //是否為最后一頁(yè) isLastPage(): boolean { return this.getPage() === this.getPageCount() - 1; }
//確定當(dāng)先需要顯示的起始分頁(yè)和結(jié)束分頁(yè) 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]; } //更新需要顯示的分頁(yè)條目 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); } } //點(diǎn)擊分頁(yè) 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(); } }
//第一頁(yè) changePageToFirst(event){ this.changePage(0,event); } //上一頁(yè) changePageToPrev(event){ this.changePage(this.getPage() - 1,event); } //下一頁(yè) changePageToNext(event){ this.changePage(this.getPage() + 1,event); } //最后一頁(yè) changePageToLast(event){ this.changePage(this.getPageCount() - 1,event); } //通過(guò)下拉菜單更改每頁(yè)顯示數(shù)量 onRppChange(event){ this.rows = this.rowsPerPageOptions[event.target.selectedIndex]; this.changePageToFirst(event); }
以上是“Angular2 PrimeNG分頁(yè)模塊的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。