Angular4 后台管理系統搭建（1） - 建立一個通用的Wijmo5 flexgrid分頁器組件

17年4月，開始學習angular2，到5月跟着升級到angular4。目前還在學習，搭建中。我的最終目的是用angular4框架搭建一個后台管理系統。這里使用了三個關鍵的外部庫。

1、使用adminLte 皮膚。這個是bootstrap的一款皮膚。風格比較嚴肅。所以選這個皮膚；

2、引用了ngx-bootstrap。這個是bootstrap對應angular的庫；

3、使用wijmo5 flexgrid表格，號稱是angular下最好的表格組件。

 

本章說下如何搭建一個flexgrid通用分頁器組件，angular的核心就是組件化，所以在搭建組件上，天生就有長處。一般是在父類組件上添加flexgrid的表格，所有和分頁相關的信息，按鈕。整合進入分頁器組件內。所以我們先明確父類組件和分頁器組件之間需要傳遞的參數。

父類組件向分頁器組件傳遞兩個參數，當前頁面  pageindex 。頁碼總數  pagecount。在分頁器子類組件內，點擊跳轉按鈕。調用父類組件的輸定綁定函數，重新綁定表格即可。分頁器最終效果如下

demo 演示地址   http://121.42.203.123

github地址         https://github.com/Vetkdf/yang-test

 

分頁器組件ts代碼，關鍵就是兩個Input參數，一個Output監聽。

import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'app-paging',
  templateUrl: './paging.component.html',
  styleUrls: ['./paging.component.css']
})
export class PagingComponent implements OnInit {

  constructor() { }

  @Input() pageIndex: number = 1;
  @Input() pageCount: number = 1;
  @Output() change: EventEmitter<number> = new EventEmitter<number>();

  ngOnInit() {
  }

  moveToFirstPage() {
    this.change.emit(1);
  }

  moveToPreviousPage() {
    this.change.emit(this.pageIndex - 1);
  }

  moveToNextPage(){
    this.change.emit(this.pageIndex + 1);
  }

  moveToLastPage() {
    this.change.emit(this.pageCount);
  }

}

分頁器組件html代碼，四個按鈕跳轉最后，最前，上一頁，下一頁。按鈕要把消息傳遞給父類組件，觸發重綁定表格即可。

<div class="btn-group">
   <button type="button" class="btn btn-default"
       (click)="this.moveToFirstPage()"
       [disabled]="this.pageIndex <= 1">
       <span class="glyphicon glyphicon-fast-backward"></span>
   </button>
   <button type="button" class="btn btn-default"
       (click)="this.moveToPreviousPage()"
       [disabled]="this.pageIndex <= 1">
       <span class="glyphicon glyphicon-step-backward"></span>
   </button>
   <button type="button" class="btn btn-default" disabled style="width:100px">
        {{ this.pageIndex | number }} / {{ this.pageCount | number }}
   </button>
   <button type="button" class="btn btn-default"
       (click)="this.moveToNextPage()"
       [disabled]="this.pageIndex >= this.pageCount">
       <span class="glyphicon glyphicon-step-forward"></span>
   </button>
   <button type="button" class="btn btn-default"
       (click)="this.moveToLastPage()"
       [disabled]="this.pageIndex >= this.pageCount">
   <span class="glyphicon glyphicon-fast-forward"></span>
   </button>
</div>

父類調用代碼

<app-paging [pageIndex]="this.pageIndex" [pageCount]="this.pageCount" (change)="bindpage($event)"></app-paging>

父類綁定分頁數據ts代碼

  private bindpage(event:number):void {
    this.GetList.GetListPageBy_M2V3(event,this.comId).then(backobj =>{
      this.cvPaging.sourceCollection = backobj.List;
      this.pageIndex = backobj.PageIndex;
      this.pageCount = backobj.CountPage;
    });
  }

 

如果下載github上的源碼。可以好好看下M2V1組件源碼。這個組件演示全國的省市區信息並進行分頁，angular4的模塊化划分還是做的非常好的。