-
Notifications
You must be signed in to change notification settings - Fork 3.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(module:table): radio selection type #8456
base: master
Are you sure you want to change the base?
Changes from all commits
5c11a42
aac33c4
f7525f5
8a974b9
e5276bb
0f989fe
ec35a90
6ec6fe1
988985b
5e4dd2a
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
--- | ||
order: 2 | ||
title: | ||
en-US: Selection | ||
zh-CN: 可选择 | ||
--- | ||
|
||
## zh-CN | ||
|
||
第一列是联动的选择框。可以通过 `nzRowSelectionType` 属性指定选择类型,默认为 `checkbox`。 | ||
|
||
## en-US | ||
|
||
Rows can be selectable by making first column as a selectable column. You can use `nzRowSelectionType` to set selection type. Default is `checkbox`. |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,116 @@ | ||
import { Component, OnInit } from '@angular/core'; | ||
|
||
import { NzRowSelectionType } from 'ng-zorro-antd/table'; | ||
|
||
interface ItemData { | ||
id: number; | ||
name: string; | ||
age: number; | ||
address: string; | ||
} | ||
|
||
@Component({ | ||
selector: 'nz-demo-table-selection', | ||
template: ` | ||
<nz-radio-group [(ngModel)]="rowSelectionType" (ngModelChange)="resetSelectedValues()"> | ||
<label nz-radio nzValue="checkbox">checkbox</label> | ||
<label nz-radio nzValue="radio">radio</label> | ||
</nz-radio-group> | ||
|
||
<nz-table #rowSelectionTable [nzData]="listOfData" (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"> | ||
<thead> | ||
<tr> | ||
<ng-container *ngIf="rowSelectionType === 'radio'"> | ||
<th nzShowRowSelection [nzRowSelectionType]="'radio'"> </th> | ||
</ng-container> | ||
<ng-container *ngIf="rowSelectionType === 'checkbox'"> | ||
<th [(nzChecked)]="checked" [nzIndeterminate]="indeterminate" (nzCheckedChange)="onAllChecked($event)"></th> | ||
</ng-container> | ||
<th>Name</th> | ||
<th>Age</th> | ||
<th>Address</th> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
<tr *ngFor="let data of rowSelectionTable.data"> | ||
<ng-container *ngIf="rowSelectionType === 'radio'"> | ||
<td | ||
[nzChecked]="setOfCheckedId.has(data.id)" | ||
[nzRowSelectionType]="'radio'" | ||
(nzCheckedChange)="onItemChecked(data.id, $event)" | ||
></td> | ||
</ng-container> | ||
|
||
<ng-container *ngIf="rowSelectionType === 'checkbox'"> | ||
<td [nzChecked]="setOfCheckedId.has(data.id)" (nzCheckedChange)="onItemChecked(data.id, $event)"></td> | ||
</ng-container> | ||
<td>{{ data.name }}</td> | ||
<td>{{ data.age }}</td> | ||
<td>{{ data.address }}</td> | ||
</tr> | ||
</tbody> | ||
</nz-table> | ||
`, | ||
styles: ` | ||
nz-radio-group { | ||
margin-block-end: 1rem; | ||
} | ||
` | ||
}) | ||
export class NzDemoTableSelectionComponent implements OnInit { | ||
rowSelectionType: NzRowSelectionType = 'checkbox'; | ||
|
||
checked = false; | ||
indeterminate = false; | ||
listOfCurrentPageData: readonly ItemData[] = []; | ||
listOfData: readonly ItemData[] = []; | ||
setOfCheckedId = new Set<number>(); | ||
|
||
updateCheckedSet(id: number, checked: boolean): void { | ||
if (checked) { | ||
if (this.rowSelectionType === 'radio') { | ||
this.setOfCheckedId.forEach(x => { | ||
this.setOfCheckedId.delete(x); | ||
}); | ||
} | ||
|
||
this.setOfCheckedId.add(id); | ||
} else { | ||
this.setOfCheckedId.delete(id); | ||
} | ||
} | ||
|
||
onItemChecked(id: number, checked: boolean): void { | ||
this.updateCheckedSet(id, checked); | ||
this.refreshCheckedStatus(); | ||
} | ||
|
||
onAllChecked(value: boolean): void { | ||
this.listOfCurrentPageData.forEach(item => this.updateCheckedSet(item.id, value)); | ||
this.refreshCheckedStatus(); | ||
} | ||
|
||
onCurrentPageDataChange($event: readonly ItemData[]): void { | ||
this.listOfCurrentPageData = $event; | ||
this.refreshCheckedStatus(); | ||
} | ||
|
||
refreshCheckedStatus(): void { | ||
this.checked = this.listOfCurrentPageData.every(item => this.setOfCheckedId.has(item.id)); | ||
this.indeterminate = this.listOfCurrentPageData.some(item => this.setOfCheckedId.has(item.id)) && !this.checked; | ||
} | ||
|
||
resetSelectedValues(): void { | ||
this.setOfCheckedId = new Set<number>(); | ||
this.indeterminate = false; | ||
} | ||
|
||
ngOnInit(): void { | ||
this.listOfData = new Array(5).fill(0).map((_, index) => ({ | ||
id: index, | ||
name: `Edward King ${index}`, | ||
age: 32, | ||
address: `London, Park Lane no. ${index}` | ||
})); | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -106,21 +106,29 @@ The data passed to `[nzData]` is exported with [Template Context](https://angula | |
|
||
Checkbox property | ||
|
||
| Property | Description | Type | Default | | ||
| ------------------- | --------------------------------------------------- | ----------------------- | ------- | | ||
| `[nzShowCheckbox]` | Whether `nz-checkbox` should be shown in the header | `boolean` | - | | ||
| `[nzDisabled]` | Whether the `nz-checkbox` is disabled | `boolean` | - | | ||
| `[nzIndeterminate]` | `nz-checkbox` indeterminate status | `boolean` | - | | ||
| `[nzLabel]` | ARIA label for the `nz-checkbox` | `string` | - | | ||
| `[nzChecked]` | Checked status, double binding | `boolean` | - | | ||
| `(nzCheckedChange)` | Callback when checked status changes | `EventEmitter<boolean>` | - | | ||
| Property | Description | Type | Default | | ||
| ---------------------- | --------------------------------------------------- | ----------------------- | ------------ | | ||
| `[nzShowCheckbox]` | Whether `nz-checkbox` should be shown in the header | `boolean` | - | | ||
| `[nzDisabled]` | Whether the `nz-checkbox` is disabled | `boolean` | - | | ||
| `[nzIndeterminate]` | `nz-checkbox` indeterminate status | `boolean` | - | | ||
| `[nzLabel]` | ARIA label for the `nz-checkbox` | `string` | - | | ||
| `[nzChecked]` | Checked status, double binding | `boolean` | - | | ||
| `[nzRowSelectionType]` | Checkbox or radio | `'checkbox' \| 'radio'` | `'checkbox'` | | ||
| `(nzCheckedChange)` | Callback when checked status changes | `EventEmitter<boolean>` | - | | ||
|
||
radio property | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. to upper case: radio -> Radio |
||
|
||
| Property | Description | Type | Default | | ||
| ---------------------- | -------------------------------------------------------------------------------------------------------- | ----------------------- | ------------ | | ||
| `[nzRowSelectionType]` | Checkbox or radio, should have `nzShowRowSelection = true` if trying to have a column with radio buttons | `'checkbox' \| 'radio'` | `'checkbox'` | | ||
|
||
Selection property | ||
|
||
| Property | Description | Type | Default | | ||
| ---------------------- | ------------------------------------------------------------------- | ---------------------------------------- | ------- | | ||
| `[nzShowRowSelection]` | Whether to show row selection options | `boolean` | - | | ||
| `[nzSelections]` | Selection options including `text` and `onSelect` callback function | `Array<{ text: string, onSelect: any }>` | - | | ||
| Property | Description | Type | Default | | ||
| ---------------------- | ------------------------------------------------------------------- | ---------------------------------------- | ------------ | | ||
| `[nzShowRowSelection]` | Whether to show row selection options | `boolean` | - | | ||
| `[nzRowSelectionType]` | Checkbox or radio | `'checkbox' \| 'radio'` | `'checkbox'` | | ||
| `[nzSelections]` | Selection options including `text` and `onSelect` callback function | `Array<{ text: string, onSelect: any }>` | - | | ||
|
||
Sort property | ||
|
||
|
@@ -164,16 +172,29 @@ Other | |
|
||
Checkbox property | ||
|
||
| Property | Description | Type | Default | | ||
| ------------------- | --------------------------------- | ----------------------- | ------- | | ||
| `[nzShowCheckbox]` | Whether add nz-checkbox | `boolean` | - | | ||
| `[nzDisabled]` | Whether disable checkbox | `boolean` | - | | ||
| `[nzIndeterminate]` | Indeterminate status | `boolean` | - | | ||
| `[nzLabel]` | ARIA label for the `nz-checkbox` | `string` | - | | ||
| `[nzChecked]` | Checked status, double binding | `boolean` | - | | ||
| `(nzCheckedChange)` | Checked status change callback | `EventEmitter<boolean>` | - | | ||
| `[colSpan]` | how many columns the cell extends | `number` | `null` | | ||
| `[rowSpan]` | how many rows the cell extends | `number` | `null` | | ||
| Property | Description | Type | Default | | ||
| ---------------------- | --------------------------------- | ----------------------- | ------------ | | ||
| `[nzShowCheckbox]` | Whether add nz-checkbox | `boolean` | - | | ||
| `[nzDisabled]` | Whether disable checkbox | `boolean` | - | | ||
| `[nzIndeterminate]` | Indeterminate status | `boolean` | - | | ||
| `[nzLabel]` | ARIA label for the `nz-checkbox` | `string` | - | | ||
| `[nzChecked]` | Checked status, double binding | `boolean` | - | | ||
| `(nzCheckedChange)` | Checked status change callback | `EventEmitter<boolean>` | - | | ||
| `[nzRowSelectionType]` | Checkbox or radio | `'checkbox' \| 'radio'` | `'checkbox'` | | ||
| `[colSpan]` | how many columns the cell extends | `number` | `null` | | ||
| `[rowSpan]` | how many rows the cell extends | `number` | `null` | | ||
|
||
radio property | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. to upper case: radio -> Radio |
||
|
||
| Property | Description | Type | Default | | ||
| ---------------------- | --------------------------------- | ----------------------- | ------------ | | ||
| `[nzDisabled]` | Whether disable checkbox | `boolean` | - | | ||
| `[nzLabel]` | ARIA label for the `nz-checkbox` | `string` | - | | ||
| `[nzChecked]` | Checked status, double binding | `boolean` | - | | ||
| `(nzCheckedChange)` | Checked status change callback | `EventEmitter<boolean>` | - | | ||
| `[nzRowSelectionType]` | Checkbox or radio | `'checkbox' \| 'radio'` | `'checkbox'` | | ||
| `[colSpan]` | how many columns the cell extends | `number` | `null` | | ||
| `[rowSpan]` | how many rows the cell extends | `number` | `null` | | ||
|
||
Expand property | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -116,12 +116,19 @@ Table 组件同时具备了易用性和高度可定制性 | |
| `[nzChecked]` | checkbox 是否被选中,可双向绑定 | `boolean` | - | | ||
| `(nzCheckedChange)` | 选中的回调 | `EventEmitter<boolean>` | - | | ||
|
||
无线电财产 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. translation erorr :) --> 单选属性 |
||
|
||
| 参数 | 说明 | 类型 | 默认值 | | ||
| ---------------------- | --------------------------------------------------------------------------------- | ----------------------- | ------------ | | ||
| `[nzRowSelectionType]` | 复选框或单选框,如果尝试使用带有单选按钮的列,则应具有“nzShowRowSelection = true” | `'checkbox' \| 'radio'` | `'checkbox'` | | ||
|
||
下拉选择属性 | ||
|
||
| 参数 | 说明 | 类型 | 默认值 | | ||
| ---------------------- | ------------------------------------------- | ---------------------------------------- | ------ | | ||
| `[nzShowRowSelection]` | 是否显示下拉选择 | `boolean` | - | | ||
| `[nzSelections]` | 下拉选择的内容 `text` 及回调函数 `onSelect` | `Array<{ text: string, onSelect: any }>` | - | | ||
| 参数 | 说明 | 类型 | 默认值 | | ||
| ---------------------- | ------------------------------------------- | ---------------------------------------- | ------------ | | ||
| `[nzShowRowSelection]` | 是否显示下拉选择 | `boolean` | - | | ||
| `[nzRowSelectionType]` | Checkbox or radio | `'checkbox' \| 'radio'` | `'checkbox'` | | ||
| `[nzSelections]` | 下拉选择的内容 `text` 及回调函数 `onSelect` | `Array<{ text: string, onSelect: any }>` | - | | ||
|
||
排序属性 | ||
|
||
|
@@ -178,6 +185,18 @@ Table 组件同时具备了易用性和高度可定制性 | |
| `[colSpan]` | 单元格可横跨的列数 | `number` | `null` | | ||
| `[rowSpan]` | 单元格可横跨的行数 | `number` | `null` | | ||
|
||
勾选属性 | ||
|
||
| 参数 | 说明 | 类型 | 默认值 | | ||
| ---------------------- | ------------------------------- | ----------------------- | ------------ | | ||
| `[nzDisabled]` | checkbox 是否禁用 | `boolean` | - | | ||
| `[nzLabel]` | checkbox 的可访问性标签 | `string` | - | | ||
| `[nzChecked]` | checkbox 是否被选中,可双向绑定 | `boolean` | - | | ||
| `[nzRowSelectionType]` | Checkbox or radio | `'checkbox' \| 'radio'` | `'checkbox'` | | ||
| `(nzCheckedChange)` | 选中的回调 | `EventEmitter<boolean>` | - | | ||
| `[colSpan]` | 单元格可横跨的列数 | `number` | `null` | | ||
| `[rowSpan]` | 单元格可横跨的行数 | `number` | `null` | | ||
|
||
展开属性 | ||
|
||
| 参数 | 说明 | 类型 | 默认值 | | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -23,9 +23,11 @@ | |
import { NzCheckboxModule } from 'ng-zorro-antd/checkbox'; | ||
import { BooleanInput } from 'ng-zorro-antd/core/types'; | ||
import { InputBoolean } from 'ng-zorro-antd/core/util'; | ||
import { NzRadioComponent, NzRadioGroupComponent } from 'ng-zorro-antd/radio'; | ||
|
||
import { NzRowExpandButtonDirective } from '../addon/row-expand-button.directive'; | ||
import { NzRowIndentDirective } from '../addon/row-indent.directive'; | ||
import { NzRowSelectionType } from '../table.types'; | ||
|
||
@Component({ | ||
selector: | ||
|
@@ -57,13 +59,30 @@ | |
[attr.aria-label]="nzLabel" | ||
(ngModelChange)="onCheckedChange($event)" | ||
></label> | ||
<label | ||
nz-radio | ||
*ngIf="nzShowRadio" | ||
[nzDisabled]="nzDisabled" | ||
[ngModel]="nzChecked" | ||
[attr.aria-label]="nzLabel" | ||
(ngModelChange)="onCheckedChange($event)" | ||
></label> | ||
<ng-content></ng-content> | ||
`, | ||
host: { | ||
'[class.ant-table-cell-with-append]': `nzShowExpand || nzIndentSize > 0`, | ||
'[class.ant-table-selection-column]': `nzShowCheckbox` | ||
'[class.ant-table-selection-column]': `nzShowCheckbox || nzShowRadio` | ||
}, | ||
imports: [NzRowIndentDirective, NzRowExpandButtonDirective, NgIf, NgTemplateOutlet, NzCheckboxModule, FormsModule], | ||
imports: [ | ||
NzRowIndentDirective, | ||
NzRowExpandButtonDirective, | ||
NgIf, | ||
NgTemplateOutlet, | ||
NzCheckboxModule, | ||
FormsModule, | ||
NzRadioComponent, | ||
NzRadioGroupComponent | ||
], | ||
standalone: true | ||
}) | ||
export class NzTdAddOnComponent implements OnChanges { | ||
|
@@ -72,12 +91,14 @@ | |
static ngAcceptInputType_nzExpand: BooleanInput; | ||
|
||
@Input() nzChecked = false; | ||
@Input() nzRowSelectionType: NzRowSelectionType = 'checkbox'; | ||
@Input() nzDisabled = false; | ||
@Input() nzIndeterminate = false; | ||
@Input() nzLabel: string | null = null; | ||
@Input() nzIndentSize = 0; | ||
@Input() @InputBoolean() nzShowExpand = false; | ||
@Input() @InputBoolean() nzShowCheckbox = false; | ||
@Input() @InputBoolean() nzShowRadio = false; | ||
@Input() @InputBoolean() nzExpand = false; | ||
@Input() nzExpandIcon: TemplateRef<void> | null = null; | ||
@Output() readonly nzCheckedChange = new EventEmitter<boolean>(); | ||
|
@@ -108,7 +129,11 @@ | |
this.nzShowExpand = true; | ||
} | ||
if (isFirstChange(nzChecked) && !this.isNzShowCheckboxChanged) { | ||
this.nzShowCheckbox = true; | ||
if (this.nzRowSelectionType === 'checkbox') { | ||
this.nzShowCheckbox = true; | ||
} else { | ||
this.nzShowRadio = true; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. For my perspective, we should make sure |
||
} | ||
} | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
should update order of other demos