Skip to content

Commit 23cb39e

Browse files
Jasonvthinkxie
Jason
authored and
vthinkxie
committed
feature(module: tree): provide some quick methods & support nzCheckStrictly (#1354)
* [WIP] feature(module: tree): provide some quick methods & support nzCheckStrictly * fix ci test * fix(module: tree): support nzCheckStrictly * fix(module: tree): fix ci error * fix(module: tree): fix some codes * fix lint error
1 parent 179c1e2 commit 23cb39e

12 files changed

Lines changed: 355 additions & 137 deletions

‎components/tree/demo/basic.ts‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, OnInit } from '@angular/core';
2-
import { NzFormatEmitEvent, NzTreeComponent, NzTreeNode } from 'ng-zorro-antd';
2+
import { NzFormatEmitEvent, NzTreeNode } from 'ng-zorro-antd';
33

44
@Component({
55
selector: 'nz-demo-tree-basic',
@@ -20,7 +20,7 @@ import { NzFormatEmitEvent, NzTreeComponent, NzTreeNode } from 'ng-zorro-antd';
2020

2121
export class NzDemoTreeBasicComponent implements OnInit {
2222
expandKeys = [ '1001', '10001' ];
23-
checkedKeys = [ '10001', '1002' ];
23+
checkedKeys = [ '100011', '1002' ];
2424
selectedKeys = [ '10001', '100011' ];
2525
expandDefault = false;
2626
nodes = [
@@ -55,10 +55,6 @@ export class NzDemoTreeBasicComponent implements OnInit {
5555
]
5656
}
5757
]
58-
},
59-
{
60-
title: 'child2',
61-
key : '10002'
6258
}
6359
]
6460
}),
@@ -77,14 +73,14 @@ export class NzDemoTreeBasicComponent implements OnInit {
7773
key : '10022',
7874
children: [
7975
{
80-
title: 'grandchild2.2.1',
81-
key : '100221'
76+
title : 'grandchild2.2.1',
77+
key : '100221',
78+
isLeaf: true
8279
}
8380
]
8481
}
8582
]
86-
}),
87-
new NzTreeNode({ title: 'root3', key: '1003' })
83+
})
8884
];
8985

9086
mouseAction(name: string, event: NzFormatEmitEvent): void {

‎components/tree/demo/customized-icon.ts‎

Lines changed: 2 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ export class NzDemoTreeCustomizedIconComponent implements OnInit {
4747
new NzTreeNode({
4848
title : 'root1',
4949
key : '1001',
50+
expanded: true,
5051
children: [
5152
{
5253
title : 'child1',
@@ -77,36 +78,9 @@ export class NzDemoTreeCustomizedIconComponent implements OnInit {
7778
]
7879
}
7980
]
80-
},
81-
{
82-
title: 'child2',
83-
key : '10002'
84-
}
85-
]
86-
}),
87-
new NzTreeNode({
88-
title : 'root2',
89-
key : '1002',
90-
expanded: true,
91-
children: [
92-
{
93-
title : 'child2.1',
94-
key : '10021',
95-
children: []
96-
},
97-
{
98-
title : 'child2.2',
99-
key : '10022',
100-
children: [
101-
{
102-
title: 'grandchild2.2.1',
103-
key : '100221'
104-
}
105-
]
10681
}
10782
]
108-
}),
109-
new NzTreeNode({ title: 'root3', key: '1003' })
83+
})
11084
];
11185

11286
mouseAction(name: string, e: any): void {

‎components/tree/demo/line.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,9 @@ export class NzDemoTreeLineComponent {
4949
]
5050
},
5151
{
52-
title: 'child2',
53-
key : '10002'
52+
title : 'child2',
53+
key : '10002',
54+
children: []
5455
}
5556
]
5657
}),
@@ -69,14 +70,14 @@ export class NzDemoTreeLineComponent {
6970
key : '10022',
7071
children: [
7172
{
72-
title: 'grandchild2.2.1',
73-
key : '100221'
73+
title : 'grandchild2.2.1',
74+
key : '100221',
75+
isLeaf: true
7476
}
7577
]
7678
}
7779
]
78-
}),
79-
new NzTreeNode({ title: 'root3', key: '1003' })
80+
})
8081
];
8182

8283
mouseAction(name: string, e: any): void {

‎components/tree/demo/method.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 7
3+
title:
4+
zh-CN: 常用方法
5+
en-US: common methods
6+
---
7+
8+
## zh-CN
9+
10+
Tree组件通过几种常用方法供用户快速获取数据。
11+
12+
## en-US
13+
14+
Tree components provide quick access to data through several common methods.

‎components/tree/demo/method.ts‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import { Component, OnInit, ViewChild } from '@angular/core';
2+
import { NzFormatEmitEvent, NzTreeComponent, NzTreeNode } from 'ng-zorro-antd';
3+
4+
@Component({
5+
selector: 'nz-demo-tree-method',
6+
template: `
7+
<nz-tree
8+
#nzTree
9+
[(ngModel)]="nodes"
10+
[nzCheckable]="true"
11+
[nzMultiple]="true"
12+
[nzCheckStrictly]="true"
13+
[nzDefaultExpandedKeys]="expandKeys"
14+
[nzDefaultCheckedKeys]="checkedKeys"
15+
[nzDefaultSelectedKeys]="selectedKeys"
16+
[nzDefaultExpandAll]="expandDefault"
17+
(nzClick)="mouseAction('click',$event)"
18+
(nzCheckBoxChange)="mouseAction('check',$event)"
19+
(nzDblClick)="mouseAction('dblclick', $event)"
20+
>
21+
</nz-tree>`
22+
})
23+
24+
export class NzDemoTreeMethodComponent implements OnInit {
25+
@ViewChild('nzTree') nzTree: NzTreeComponent;
26+
expandKeys = [ '1001', '10001' ];
27+
checkedKeys = [ '10001' ];
28+
selectedKeys = [ '10001', '100011' ];
29+
expandDefault = false;
30+
nodes = [
31+
new NzTreeNode({
32+
title : 'root1',
33+
key : '1001',
34+
children: [
35+
{
36+
title : 'child1',
37+
key : '10001',
38+
children: [
39+
{
40+
title : 'child1.1',
41+
key : '100011',
42+
children: []
43+
},
44+
{
45+
title : 'child1.2',
46+
key : '100012',
47+
children: [
48+
{
49+
title : 'grandchild1.2.1',
50+
key : '1000121',
51+
isLeaf : true,
52+
disabled: true
53+
},
54+
{
55+
title : 'grandchild1.2.2',
56+
key : '1000122',
57+
isLeaf: true
58+
}
59+
]
60+
}
61+
]
62+
}
63+
]
64+
})
65+
];
66+
67+
mouseAction(name: string, event: NzFormatEmitEvent): void {
68+
console.log(name, event);
69+
// just for demo, should get in ngAfterViewInit
70+
console.log('checkedNodes: %o', this.nzTree.getCheckedNodeList());
71+
console.log('selectedNodes: %o', this.nzTree.getSelectedNodeList());
72+
console.log(this.nzTree.nzTreeService.getCheckedNodeList());
73+
}
74+
75+
ngOnInit(): void {
76+
}
77+
}

‎components/tree/demo/search.ts‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -72,16 +72,13 @@ export class NzDemoTreeSearchComponent {
7272
selectable: false,
7373
children : [
7474
{
75-
title: 'grandchild2.2.1',
76-
key : '100221'
75+
title : 'grandchild2.2.1',
76+
key : '100221',
77+
isLeaf: true
7778
}
7879
]
7980
}
8081
]
81-
}),
82-
new NzTreeNode({
83-
title: 'root3',
84-
key : '1003'
8582
})
8683
];
8784

‎components/tree/doc/index.en-US.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ Almost anything can be represented in a tree structure. Examples include directo
2121
| nzAsyncData | Load data asynchronously (should be used with NzTreeNode.addChildren(...)) | boolean | false |
2222
| nzDraggable | Specifies whether this Tree is draggable (IE > 8) | boolean | false |
2323
| nzMultiple | Allows selecting multiple treeNodes | boolean | false |
24+
| nzCheckStrictly | Check treeNode precisely; parent treeNode and children treeNodes are not associated | boolean | false |
2425
| nzDefaultExpandAll | Whether to expand all treeNodes by default | boolean | false |
2526
| nzDefaultExpandedKeys | Specify the keys of the default expanded treeNodes | string\[] | \[] |
2627
| nzDefaultCheckedKeys | Specifies the keys of the default checked treeNodes | string\[] | \[] |
@@ -39,6 +40,8 @@ Almost anything can be represented in a tree structure. Examples include directo
3940
| nzOnDragLeave | Callback function for when the onDragLeave event occurs | EventEmitter<NzFormatEmitEvent\> | - |
4041
| nzOnDrop | Callback function for when the onDrop event occurs | EventEmitter<NzFormatEmitEvent\> | - |
4142
| nzOnDragEnd | Callback function for when the onDragEnd event occurs | EventEmitter<NzFormatEmitEvent\> | - |
43+
| getCheckedNodeList | get checked nodes(merged) | NzTreeNode[] | [] |
44+
| getSelectedNodeList | get selected nodes | NzTreeNode[] | [] |
4245

4346
### NzTreeNodeOptions props
4447

@@ -65,6 +68,8 @@ Almost anything can be represented in a tree structure. Examples include directo
6568
| dragNode? | Current drag node (existing when dragged) | NzTreeNode | null |
6669
| selectedKeys? | Selected node list (exist when clicked) | array<NzTreeNode\> | [] |
6770
| checkedKeys? | Checked node list (exist when click checkbox) | array<NzTreeNode\> | [] |
71+
| flatCheckedKeys? | Flatten the Checked nodes list (exist when click checkbox) | array<NzTreeNode\> | [] |
72+
| matchededKeys? | matched nodes while searching | array<NzTreeNode\> | [] |
6873

6974
### NzFormatBeforeDropEvent props
7075

‎components/tree/doc/index.zh-CN.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ subtitle: 树形控件
2222
| nzAsyncData | 是否异步加载(显示加载状态) | boolean | false |
2323
| nzDraggable | 设置节点可拖拽（IE>8） | boolean | false |
2424
| nzMultiple | 支持点选多个节点（节点本身） | boolean | false |
25+
| nzCheckStrictly | checkable状态下节点选择完全受控（父子节点选中状态不再关联） | boolean | false |
2526
| nzDefaultExpandAll | 默认展开所有树节点 | boolean | false |
2627
| nzDefaultExpandedKeys | 默认展开指定的树节点 | string\[] | \[] |
2728
| nzDefaultCheckedKeys | 默认选中复选框的树节点 | string\[] | \[] |
@@ -40,6 +41,8 @@ subtitle: 树形控件
4041
| nzOnDragLeave | dragleave 触发时调用 | EventEmitter<NzFormatEmitEvent\> | - |
4142
| nzOnDrop | drop 触发时调用 | EventEmitter<NzFormatEmitEvent\> | - |
4243
| nzOnDragEnd | dragend 触发时调用 | EventEmitter<NzFormatEmitEvent\> | - |
44+
| getCheckedNodeList | 获取组件 checkBox 被点击选中的节点 | NzTreeNode[] | [] |
45+
| getSelectedNodeList | 获取组件被选中的节点 | NzTreeNode[] | [] |
4346

4447
### NzTreeNodeOptions props
4548

0 commit comments

Comments
 (0)