Angular写一个分页控件

最新推荐文章于 2023-11-02 16:46:02 发布

晓晓是个打字员

最新推荐文章于 2023-11-02 16:46:02 发布

阅读量296

点赞数

CC 4.0 BY-SA版权

分类专栏： Angular 文章标签： Angular

本文链接：https://blog.youkuaiyun.com/qq_32490291/article/details/86677620

Angular 专栏收录该内容

21 篇文章

订阅专栏

本文档介绍了如何在Angular应用中创建一个分页组件，包括HTML模板、CSS样式和 TypeScript 实现。通过`paginator.component.html`、`paginator.component.css`、`paginator.component.ts`以及模块配置`vg-component.module.ts`来详细阐述分页控件的构建过程。在实际应用中，可在`main.html`和`main.component.ts`中引入并使用这个分页组件。

paginator.component.html

<div class="row page-bar">
    <div class="left" style="flex:1;">
        <span class="size-item">共{{total}}条记录</span>
        <span class="page-item">共{{pageSize}}页</span>
    </div>
    <div class="right row">
        <select [(ngModel)]="selectedLimit" (change)="setLimit()" >
            <option [value]="item" *ngFor="let item of limitOptions" [selected]="item == selectedLimit">{{item}}</option>
        </select>
        <div class="item-box row">
            <button class="pre-btn" (click)="goPre()" [disabled]="currentPage == 1"><</button>
            <div class="page-box">
                <div class="scroll-box row" [ngStyle]="{left:scrollLeft+'px'}">
                    <span [ngClass]="{'selected':item == currentPage}" *ngFor="let item of pageList" (click)="selectedPage(item)">{{item}}</span>
                </div>
            </div>
           <button class="next-btn" (click)="goNext()" [disabled]="currentPage == pageList.length">></button>
        </div>
    </div>
</div>

paginator.component.css

.item-box span{width: 28px; min-width: 28px; height: 28px; text-align: center; line-height:26px; border:1px solid #c3cad9; border-radius: 2px; margin:0 4px; color:#6b798e; font-size:12px; cursor: pointer;}
.item-box span.selected{background-color: #358bf2; color:#fff; border-color:#358bf2;}
.page-bar{background-color: #fff; padding:20px;}
.page-bar .left{color: #6b798e; font-size: 12px;}
.page-bar .left span{line-height: 28px; margin-right: 12px;}
.page-bar select{width: 65px; border:1px solid #c3cad9; border-radius: 2px; text-indent: 10px;}
.page-box{max-width: 253px; overflow: hidden;}
.scroll-box{position: relative;}
.pre-btn{margin-left:12px;}
.pre-btn,.next-btn{width: 28px; background-color:#358bf2; border: 1px solid #358bf2; color:#fff; border-radius:2px}
.pre-btn[disabled],.next-btn[disabled]{background-color: #ddd; border:1px solid #ddd;}

paginator.component.ts

import { Component, OnInit, Input,Output,EventEmitter,ElementRef,ViewChild,TemplateRef, SimpleChange } from '@angular/core';
 
@Component({
  selector: 'app-paginator',
  templateUrl: './paginator.component.html',
  styleUrls: ['./paginator.component.css']
})
export class PaginatorComponent implements OnInit {
  selectedLimit:any;
  pageList=[];
  pageSize:Number;
  currentPage =1;
  scrollLeft =0;
  @ViewChild(".scroll-box") scrollBox: TemplateRef<any>;

  @Input() limitOptions: any;
  @Input() total: Number;

  @Output() doFunction: EventEmitter<any> = new EventEmitter();

  constructor(private elementRef:ElementRef) {
    // console.log(this.elementRef);
  }

  ngOnChanges(changes: {[propKey: string]: SimpleChange}) {
    this.setPageItem(changes.total.currentValue,this.selectedLimit);
  }

  setLimit(){
    this.doFunction.emit({currentLimit:this.selectedLimit,currentPage:1});
    this.setPageItem(this.total,this.selectedLimit);
  }

  selectedPage(item){
    this.currentPage = item;
    this.doFunction.emit({currentPage:item});
  }

  setPageItem(total,limit){ //set page item
    this.pageList=[];
    this.pageSize = Math.ceil(total / limit);
    for(let index=0;index < this.pageSize;index++){
      this.pageList.push(index+1);
    }
  }

  goPre(){
    if(this.currentPage>1){
      if(this.currentPage >6){
        this.scrollLeft = -(this.currentPage -7)*36;
      }else{
        this.scrollLeft =0
      }
      this.currentPage--;
      this.doFunction.emit({currentPage:this.currentPage});
    }
  }

  goNext(){
    if(this.currentPage < this.pageSize){
      if(this.currentPage >6){
        this.scrollLeft = -(this.currentPage -6)*36;
      }else{
        this.scrollLeft =0
      }
      this.currentPage++;
      this.doFunction.emit({currentPage:this.currentPage});
    }
  }

  ngOnInit() {
    this.selectedLimit = this.limitOptions[0];
    this.setPageItem(this.total,this.selectedLimit);
  }
}

vg-component.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { PaginatorComponent } from '../paginator/paginator.component';

@NgModule({
  declarations: [
    PaginatorComponent
  ],
  imports: [
    CommonModule,
    FormsModule
  ],
  exports:[
    PaginatorComponent
  ]
})
export class VgCommonModule { }

引用分页页面：
main.html

<app-paginator   [limitOptions]="[5,10,20]" total="{{totalColumns}}" (doFunction)="needDo($event)"></app-paginator>

main.component.ts

needDo(ev){
  console.log(ev);
}