AntD02 Table組件的使用

1 前提準備

　　1.1 建立一個angular項目

　　1.2 將 Ant Design 整合到 Angular 項目中

　　1.3 官方文檔

2 簡單使用

<nz-table #rowSelectionTable [nzData]="data" (nzCurrentPageDataChange)="currentPageDataChange($event)" (nzPageIndexChange)="refreshStatus()" (nzPageSizeChange)="refreshStatus()">
    <thead>
    <tr>
        <th nzShowCheckbox [(nzChecked)]="allChecked" [nzIndeterminate]="indeterminate" (nzCheckedChange)="checkAll($event)"></th>
        <th>Name</th>
        <th>Age</th>
        <th>Address</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of rowSelectionTable.data">
        <td nzShowCheckbox [(nzChecked)]="data.checked" [nzDisabled]="data.disabled" (nzCheckedChange)="refreshStatus($event)"></td>
        <td>{{data.name}}</td>
        <td>{{data.age}}</td>
        <td>{{data.address}}</td>
    </tr>
    </tbody>
</nz-table>

.html

import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-test-demo', templateUrl: './test-demo.component.html', styleUrls: ['./test-demo.component.css'] }) export class TestDemoComponent implements OnInit { allChecked = false; // 判斷是否所有被選中（PS: 有效的所有被選中）
  indeterminate = false;  // 只要有選中可是不是所有選中就會變成true
  displayData = []; // 存放本頁數據
  data = [ // 模擬後臺數據
 { name : 'John Brown', age : 32, address : 'New York No. 1 Lake Park', checked : false, disabled: false }, { name : 'Jim Green', age : 42, address : 'London No. 1 Lake Park', checked : false, disabled: false }, { name : 'Joe Black', age : 32, address : 'Sidney No. 1 Lake Park', checked : false, disabled: false }, { name : 'Disabled User', age : 32, address : 'Sidney No. 1 Lake Park', checked : false, disabled: true } ]; ngOnInit() { } currentPageDataChange($event: Array<{ name: string; age: number; address: string; checked: boolean; disabled: boolean; }>): void { this.displayData = $event; // 獲取本頁數據
    // console.log(this.displayData);
    alert("currentPageDataChange"); this.refreshStatus(); // 刷新操做
 } /** 選中一行後觸發被觸發的方法 */ refreshStatus(): void { alert("refreshStatus"); const allChecked = this.displayData.filter(value => !value.disabled).every(value => value.checked === true); // 判斷是否選中全部行（PS：針對有效的）
    const allUnChecked = this.displayData.filter(value => !value.disabled).every(value => !value.checked); // 判斷是否全部的沒被選中（PS:針對無效的）
    this.allChecked = allChecked; this.indeterminate = (!allChecked) && (!allUnChecked); } // 選中全部行（PS:有效的全部行）
  checkAll(value: boolean): void { alert("checkAll"); this.displayData.forEach(data => { if (!data.disabled) { data.checked = value; } }); this.refreshStatus(); } }

.ts

　　2.1 nz-table 組件的屬性

　　　　2.1.1 nzData 屬性

　　　　　　antD的table組件接收的數據類型必須是數組類型；nz-table 組件的 nzData 屬性用來接收須要展示的數據
html

　　　　　　技巧01：若是使用了 nzData 屬性來接收數據的話，就能夠爲 nz-table 組件指定一個模板變量，而後就能夠用這個模板變量來獲取 nzData 屬性接收到的數據了數組

　　　　2.1.2 nzIndeterminate 屬性

　　　　　　判斷是否還有有效數據沒被選中，若是全部的有效數據都被選中或者全部有效數據都沒被選中 nzIndeterminate 就爲 false; 若是只有部分有效數據被選中就爲 trueapp

　　　　2.1.3 nzDisabled 屬性

　　　　　　接收 boolean 類型數據，該屬性表示該行數據是否有效；若是爲 true 表示數據有效，反之數據無效ide

　　2.2 nz-table 組件的事件

　　　　2.2.1 nzCurrentPageDataChange 事件

　　　　　　該事件用來獲取當前頁的全部展示出來的數據；在進行翻頁操做的時候就會觸發該方法this

　　　　　　技巧01：table組件默認每頁顯示10條數據spa

　　　　　　技巧02：能夠利用 nzCurrentPageDataChange 來獲取當頁數據；可是須要本身編寫對應的時間處理方法，例如雙向綁定

currentPageDataChange($event: Array<{ name: string; age: number; address: string; checked: boolean; disabled: boolean; }>): void { this.displayData = $event; // 獲取本頁數據
    // console.log(this.displayData);
    alert("currentPageDataChange"); this.refreshStatus(); // 刷新操做
  }

　　　　2.2.2 nzPageIndexChange 事件

　　　　2.2.3 nzPageSizeChange 事件

　　　　2.2.3 nzCheckedChange 事件

　　　　　　複選框被選中時觸發的事件code

　　　　　　技巧01：若是 nzCheckedChange 用在表頭能夠用於選中全部有效數據component

　　　　　　技巧02：若是 nzCheckedChange 用在除表頭之外的行時能夠用於獲取當前行數據

　　　　　　技巧03：nzCheckedChange 對應的事件處理方法須要本身定義，例如：

/** 選中一行後觸發被觸發的方法 */ refreshStatus(): void { alert("refreshStatus"); const allChecked = this.displayData.filter(value => !value.disabled).every(value => value.checked === true); // 判斷是否選中全部行（PS：針對有效的）
    const allUnChecked = this.displayData.filter(value => !value.disabled).every(value => !value.checked); // 判斷是否全部的沒被選中（PS:針對無效的）
    this.allChecked = allChecked; this.indeterminate = (!allChecked) && (!allUnChecked); } // 選中全部行（PS:有效的全部行）
  checkAll(value: boolean): void { alert("checkAll"); this.displayData.forEach(data => { if (!data.disabled) { data.checked = value; } }); this.refreshStatus(); }

View Code

　　　　　　技巧04：若是在 html 文件中調用自定義方法時傳入的實參是 $event, 那麼自定義處理 nzCheckedChange 的方法的形參就只能是 boolean 類型；固然將形參指定文任意值，而後在html中調用時隨便傳入便可，最多見的作法就是將選中行的數據傳過去

　　2.3 nz-table 組件的指令

　　　　2.3.1 nzShowCheckbox 指令

　　　　　　增長 nzShowCheckbox 後的th/td將得到和 nz-checkbox 同樣的功能，即：成爲一個複選框

　　2.4 nz-table 組件的雙向綁定

　　　　2.4.1 nzChecked 雙向綁定

　　　　　　nzChecked 接收 boolean 類型的數據；他的做用是指定複選框是否被選中；nzChecked 爲 true 時表示選中，反之未選中

　　　　　　技巧01：nzChecked 只能用在使用了 nzShowCheckbox 的 th/td 上

3 選擇和操做

<!-- 處理選中的數據 start -->
<div style="margin-bottom: 16px;">
    <button nz-button [disabled]="disabledButton" [nzType]="'primary'" [nzLoading]="operating" (click)="operateData()"> 執行選中 </button>
    <span style="margin-left: 8px;" *ngIf="checkedNumber">Selected {{checkedNumber}} items</span> 
</div>
<!-- 處理選中的數據 end -->

<nz-table #rowSelectionTable [nzData]="dataSet" (nzCurrentPageDataChange)="currentPageDataChange($event)" (nzPageIndexChange)="refreshStatus()" (nzPageSizeChange)="refreshStatus()">
    <thead>
        <tr>
        <th nzShowCheckbox [(nzChecked)]="allChecked" [nzIndeterminate]="indeterminate" (nzCheckedChange)="checkAll($event)"></th>
        <th>Name</th>
        <th>Age</th>
        <th>Address</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let data of rowSelectionTable.data">
        <td nzShowCheckbox [(nzChecked)]="data.checked" (nzCheckedChange)="refreshStatus($event)"></td>
        <td>{{data.name}}</td>
        <td>{{data.age}}</td>
        <td>{{data.address}}</td>
        </tr>
    </tbody>
</nz-table>

.html

import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-test-demo', templateUrl: './test-demo.component.html', styleUrls: ['./test-demo.component.css'] }) export class TestDemoComponent implements OnInit { allChecked = false; // 是否所有選中
  disabledButton = true; // 按鈕是否失效
  checkedNumber = 0; // 選中行數
  displayData: Array<{ name: string; age: number; address: string; checked: boolean }> = []; // 選中的數據
  operating = false; // 操做樣式是否生效
  dataSet = []; // 模擬後臺數據
  indeterminate = false; // 是否還有不肯定的

  /** 獲取當前頁數據 */ currentPageDataChange($event: Array<{ name: string; age: number; address: string; checked: boolean }>): void { this.displayData = $event; console.log(this.displayData); } /** 刷新 */ refreshStatus(): void { const allChecked = this.displayData.every(value => value.checked === true); // 判斷有效數據是否所有選中
    const allUnChecked = this.displayData.every(value => !value.checked); // 判斷無效數據是否都沒選中

    this.allChecked = allChecked; // 刷新是否全選中
    this.indeterminate = (!allChecked) && (!allUnChecked); // 刷新是否有不肯定數據
    this.disabledButton = !this.dataSet.some(value => value.checked); // 刷新按鈕是否有效(PS:只要有有效數據被選中disabledButton就會變成false)
    this.checkedNumber = this.dataSet.filter(value => value.checked).length; // 刷新選中行數
 } /** 全選事件執行方法 + 刷新 */ checkAll(value: boolean): void { this.displayData.forEach(data => data.checked = value); this.refreshStatus(); } /** 數據處理方法 */ operateData(): void { this.operating = true;  // 使數據操做樣式生效

    // 延時1秒鐘來模擬數據操做
    setTimeout(_ => { // 官方例子：對選中的數據進行取消選中操做
      // this.dataSet.forEach(value => value.checked = false); // 數據操做完成後將全部選中的數據變成未選中狀態

      // 三少的例子：刪除被選中的數據
      let newData = []; newData = this.dataSet.filter(value => value.checked == false); this.dataSet = newData; this.refreshStatus(); // 刷新
      this.operating = false; // 使數據操做樣式失效
    }, 1000); } ngOnInit(): void { // 模擬數據
    for (let i = 0; i < 46; i++) { this.dataSet.push({ name : `Edward King ${i}`, age : 32, address: `London, Park Lane no. ${i}`, checked: false }); } } }

.ts