html
<nz-table (nzCurrentPageDataChange)="onCurrentPageDataChange($event)">
<thead>
<tr>
<!--表头的复选框-->
<th nzShowCheckbox [nzChecked]="checked" [nzIndeterminate]="indeterminate"
(nzCheckedChange)="onAllChecked($event)">
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of listofData">
<!--表中数据的复选框-->
<td nzShowCheckbox [nzChecked]="setOfCheckedId.has(data.user_id)"
(nzCheckedChange)="onItemChecked(data.user_id, $event)">
</td>
<td></td>
</tr>
</tbody>
</nz-table>
checked | indeterminate | |
---|---|---|
全选中 | T | F |
未全选中 | F | T |
未选中 | F | F |
javascript逻辑
// 复选(表头的复选框控制表格内的复选框 相关变量)
checked = false; // 当页是否全选
indeterminate = false;
listOfCurrentPageData = []; // 当页表格中的数据列表?
setOfCheckedId = new Set<number>(); // 选中的联系人的id集合
// 当表头的复选框被选中时
onAllChecked(value: boolean): void {
//console.log('onAllChecked:' + this.listOfCurrentPageData);
this.listOfCurrentPageData.forEach(item => this.updateCheckedSet(item.user_id, value));
this.refreshCheckedStatus();
}
// 更新选中的联系人的id集合
updateCheckedSet(user_id: number, checked: boolean): void {
if (checked) {
this.setOfCheckedId.add(user_id);
} else {
this.setOfCheckedId.delete(user_id);
}
}
// 更新状态
refreshCheckedStatus(): void {
if (this.listOfCurrentPageData.length !== 0) {
//如果这里listOfCurrentPageData为空数组,setOfCheckedId也为空集合,这里checked会变为true,出现页面没有数据时,表头的复选框会被选中的情况
this.checked = this.listOfCurrentPageData.every(item => this.setOfCheckedId.has(item.user_id));
this.indeterminate = this.listOfCurrentPageData.some(item => this.setOfCheckedId.has(item.user_id)) && !this.checked;
}
}
// 当表格内的单个复选框被选中时
onItemChecked(id: number, checked: boolean): void {
// console.log('当前项的id:' + id);
this.updateCheckedSet(id, checked);
this.refreshCheckedStatus();
}
// 当前页面展示数据改变的回调函数:event是当页表格的数据数组对象(有待验证?)
onCurrentPageDataChange($event: any): void {
//console.log('onCurrentPageDataChange:' + $event);
//console.log(this.listOfCurrentPageData);
this.listOfCurrentPageData = $event;
this.refreshCheckedStatus();
}