nz-table复选功能改造（整行可选）

如果你用到了nz-table组件，而且有勾选列表的需求时，就可以用该组件自带的nzShowCheckbox勾选属性，用法如下：

<nz-table
      #rowSelectionTable
      nzShowPagination
      nzShowSizeChanger
      [nzData]=""
      (nzCurrentPageDataChange)=""
    >
      <thead>
        <tr>
          <th
            nzShowCheckbox
            [(nzChecked)]=""
            [nzIndeterminate]=""
            (nzCheckedChange)=""
          ></th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of rowSelectionTable.data">
          <td
            nzShowCheckbox
            [(nzChecked)]=""
            (nzCheckedChange)=""
          ></td>
        </tr>
      </tbody>
</nz-table>

第一列是联动的选择框，增加 nzShowCheckbox 后，th 获得和 nz-checkbox 一样的功能，选择后进行操作，完成后清空选择，请注意：数据逻辑需要自行控制。

数据方面组件案例定义了一个mapOfCheckedId对象，可以把数据里用于唯一标识的id或其他字段的值存入该对象，然后通过改变它的值（boolean）去控制列表行要不要勾选。

//ts文件定义：

mapOfCheckedId: { [key: string]: boolean } = {};

//html文件:

<nz-table
      #rowSelectionTable
      nzShowPagination
      nzShowSizeChanger
      [nzData]=""
      (nzCurrentPageDataChange)="" > <thead> <tr> <th nzShowCheckbox [(nzChecked)]="" [nzIndeterminate]="" (nzCheckedChange)="" ></th> </tr> </thead> <tbody> <tr *ngFor="let data of rowSelectionTable.data"> <td nzShowCheckbox [(nzChecked)]="mapOfCheckedId[data.id]" (nzCheckedChange)="" ></td> </tr> </tbody> </nz-table>

列表勾选除了要控制数据逻辑，还需自行设置样式。组件提供了[nzIndeterminate]属性控制勾选样式（主要用于设置th的复选框css），th的复选框可以有三种状态：空、‘√’、‘-’，这里需要和它的[nzChecked]属性配合使用：

[`nzIndeterminate]`	`[nzChecked]`	css显示
true	true	-
false	true	√
false	false	无css

ts:

export class InterviewListComponent implements OnInit{
　　mapOfCheckedId: { [key: string]: boolean } = {}；
    allListCheck = {
        allChecked: false,
        indeterminate: false
    };
    constructor() { }
    ngOnInit(){ }

　　 //表格选中的样式处理

　refreshStatus(): void {

　　this.dataTable.forEach((item, i) => {

　　　if (this.mapOfCheckedId[item.candidateId]) {

　　　　 if (!this.checkedData.some(items => items.candidateId === item.candidateId)) { this.checkedData.push(item); }

　　　　} else {

　　　　 this.checkedData = this.checkedData.filter(items => items.candidateId !== item.candidateId);

　　　 }

　　　});

　　 //设置全选checkbox的样式

　　 if (this.dataTable.every(item => this.mapOfCheckedId[item.candidateId] )){

　　　　this.allListCheck.allChecked = true;

　　　 this.allListCheck.indeterminate = false;

　　 }else{

　　　 this.allListCheck.allChecked = false;

　　　 this.allListCheck.indeterminate = this.dataTable.some(item => this.mapOfCheckedId[item.candidateId]);

　　 }

　　 this.copyCheckData = JSON.parse(JSON.stringify(this.checkedData));

　　}

　　checkAll(value: boolean): void {

　　 this.dataTable.forEach(item => this.mapOfCheckedId[item.candidateId] = value);
　　　　this.refreshStatus();

}

　　clearChecked(){

　　　this.checkedData = [];

　　　this.copyCheckData = [];

　　　this.mapOfCheckedId = {};

　　　this.allListCheck.allChecked = false;

　　　 this.allListCheck.indeterminate = false;

　　}

html:

<nz-table [nzLoading]="loading" #activeTable [nzData]="dataTable" [nzShowPagination]=false　[nzFrontPagination]="false">
    <thead>
    　  <tr>
        　　<th  width="34" nzShowCheckbox [nzChecked]="allListCheck.allChecked" [nzIndeterminate]="allListCheck.indeterminate" (nzCheckedChange)="checkAll($event)"></th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let data of activeTable.data;let i=index" [ngClass]="{'checked':mapOfCheckedId[data.candidateId]}">
        　　<td
              nzShowCheckbox
              [(nzChecked)]="mapOfCheckedId[data.candidateId]"(nzCheckedChange)="refreshStatus()"
            ></td>            
        </tr>
    </tbody>
</nz-table>

这样就可以实现表格复选功能了，但是只能在点击复选框时才能进行勾选，想要整行都可以，就需要再改造下：

ts:

export class InterviewListComponent implements OnInit{
　　mapOfCheckedId: { [key: string]: boolean } = {}；
    allListCheck = {
        allChecked: false,
        indeterminate: false }; constructor() { } ngOnInit(){}
　 selectedTr(data){
    　　this.mapOfCheckedId[data.candidateId] = !this.mapOfCheckedId[data.candidateId];
    　　this.refreshStatus();
  }

　　 //表格选中的样式处理

　refreshStatus(): void {

　　this.dataTable.forEach((item, i) => {

　　　if (this.mapOfCheckedId[item.candidateId]) {

　　　　 if (!this.checkedData.some(items => items.candidateId === item.candidateId)) { this.checkedData.push(item); }

　　　　} else {

　　　　 this.checkedData = this.checkedData.filter(items => items.candidateId !== item.candidateId);

　　　 }

　　　});

　　 //设置全选checkbox的样式

　　 if (this.dataTable.every(item => this.mapOfCheckedId[item.candidateId] )){

　　　　this.allListCheck.allChecked = true;

　　　 this.allListCheck.indeterminate = false;

　　 }else{

　　　 this.allListCheck.allChecked = false;

　　　 this.allListCheck.indeterminate = this.dataTable.some(item => this.mapOfCheckedId[item.candidateId]);

　　 }

　　 this.copyCheckData = JSON.parse(JSON.stringify(this.checkedData));

　　}

　　checkAll(value: boolean): void {

    　 let newValue = !value;
    　　　 this.dataTable.forEach(item => this.mapOfCheckedId[item.candidateId] = newValue);
    　　　 this.refreshStatus();

}

　　clearChecked(){

　　　this.checkedData = [];

　　　this.copyCheckData = [];

　　　this.mapOfCheckedId = {};

　　　this.allListCheck.allChecked = false;

　　　this.allListCheck.indeterminate = false;

　　}

html:

<nz-table [nzLoading]="loading" #activeTable [nzData]="dataTable" [nzShowPagination]=false　[nzFrontPagination]="false">
    <thead>
    　  <tr (click)="checkAll(allListCheck.allChecked)">
            <th  width="34" nzShowCheckbox [nzChecked]="allListCheck.allChecked" [nzIndeterminate]="allListCheck.indeterminate" (click)="checkAll(allListCheck.allChecked);$event.stopPropagation()"></th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let data of activeTable.data;let i=index" [ngClass]="{'checked':mapOfCheckedId[data.candidateId]}" (click)="selectedTr(data)">
        　　<td
              nzShowCheckbox
              [(nzChecked)]="mapOfCheckedId[data.candidateId]"
              　　(click)="refreshStatus();$event.stopPropagation()"
            ></td>            
        </tr>
    </tbody>
</nz-table>

说明一下：在tr上设置了点击事件后，td复选框原本的（nzCheckedChange）就不能再用了，需要改成click事件。

来源：oschina

链接：https://my.oschina.net/u/4261744/blog/3315821

标签

Check All