feature(module: tree): provide some quick methods & support nzCheckSt…

…rictly (NG-ZORRO#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
hsuanxyz · May 1, 2018 · 363054b · 363054b
1 parent aee0c3b
commit 363054b
Show file tree

Hide file tree

Showing 12 changed files with 355 additions and 137 deletions.
diff --git a/components/tree/demo/basic.ts b/components/tree/demo/basic.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { NzFormatEmitEvent, NzTreeComponent, NzTreeNode } from 'ng-zorro-antd';
+import { NzFormatEmitEvent, NzTreeNode } from 'ng-zorro-antd';
 
 @Component({
   selector: 'nz-demo-tree-basic',
@@ -20,7 +20,7 @@ import { NzFormatEmitEvent, NzTreeComponent, NzTreeNode } from 'ng-zorro-antd';
 
 export class NzDemoTreeBasicComponent implements OnInit {
   expandKeys = [ '1001', '10001' ];
-  checkedKeys = [ '10001', '1002' ];
+  checkedKeys = [ '100011', '1002' ];
   selectedKeys = [ '10001', '100011' ];
   expandDefault = false;
   nodes = [
@@ -55,10 +55,6 @@ export class NzDemoTreeBasicComponent implements OnInit {
               ]
             }
           ]
-        },
-        {
-          title: 'child2',
-          key  : '10002'
         }
       ]
     }),
@@ -77,14 +73,14 @@ export class NzDemoTreeBasicComponent implements OnInit {
           key     : '10022',
           children: [
             {
-              title: 'grandchild2.2.1',
-              key  : '100221'
+              title : 'grandchild2.2.1',
+              key   : '100221',
+              isLeaf: true
             }
           ]
         }
       ]
-    }),
-    new NzTreeNode({ title: 'root3', key: '1003' })
+    })
   ];
 
   mouseAction(name: string, event: NzFormatEmitEvent): void {

diff --git a/components/tree/demo/customized-icon.ts b/components/tree/demo/customized-icon.ts
@@ -47,6 +47,7 @@ export class NzDemoTreeCustomizedIconComponent implements OnInit {
     new NzTreeNode({
       title   : 'root1',
       key     : '1001',
+      expanded: true,
       children: [
         {
           title   : 'child1',
@@ -77,36 +78,9 @@ export class NzDemoTreeCustomizedIconComponent implements OnInit {
               ]
             }
           ]
-        },
-        {
-          title: 'child2',
-          key  : '10002'
-        }
-      ]
-    }),
-    new NzTreeNode({
-      title   : 'root2',
-      key     : '1002',
-      expanded: true,
-      children: [
-        {
-          title   : 'child2.1',
-          key     : '10021',
-          children: []
-        },
-        {
-          title   : 'child2.2',
-          key     : '10022',
-          children: [
-            {
-              title: 'grandchild2.2.1',
-              key  : '100221'
-            }
-          ]
         }
       ]
-    }),
-    new NzTreeNode({ title: 'root3', key: '1003' })
+    })
   ];
 
   mouseAction(name: string, e: any): void {

diff --git a/components/tree/demo/line.ts b/components/tree/demo/line.ts
@@ -49,8 +49,9 @@ export class NzDemoTreeLineComponent {
           ]
         },
         {
-          title: 'child2',
-          key  : '10002'
+          title   : 'child2',
+          key     : '10002',
+          children: []
         }
       ]
     }),
@@ -69,14 +70,14 @@ export class NzDemoTreeLineComponent {
           key     : '10022',
           children: [
             {
-              title: 'grandchild2.2.1',
-              key  : '100221'
+              title : 'grandchild2.2.1',
+              key   : '100221',
+              isLeaf: true
             }
           ]
         }
       ]
-    }),
-    new NzTreeNode({ title: 'root3', key: '1003' })
+    })
   ];
 
   mouseAction(name: string, e: any): void {

diff --git a/components/tree/demo/method.md b/components/tree/demo/method.md
@@ -0,0 +1,14 @@
+---
+order: 7
+title:
+  zh-CN: 常用方法
+  en-US: common methods
+---
+
+## zh-CN
+
+Tree组件通过几种常用方法供用户快速获取数据。
+
+## en-US
+
+Tree components provide quick access to data through several common methods.
diff --git a/components/tree/demo/method.ts b/components/tree/demo/method.ts
@@ -0,0 +1,77 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NzFormatEmitEvent, NzTreeComponent, NzTreeNode } from 'ng-zorro-antd';
+
+@Component({
+  selector: 'nz-demo-tree-method',
+  template: `
+    <nz-tree
+      #nzTree
+      [(ngModel)]="nodes"
+      [nzCheckable]="true"
+      [nzMultiple]="true"
+      [nzCheckStrictly]="true"
+      [nzDefaultExpandedKeys]="expandKeys"
+      [nzDefaultCheckedKeys]="checkedKeys"
+      [nzDefaultSelectedKeys]="selectedKeys"
+      [nzDefaultExpandAll]="expandDefault"
+      (nzClick)="mouseAction('click',$event)"
+      (nzCheckBoxChange)="mouseAction('check',$event)"
+      (nzDblClick)="mouseAction('dblclick', $event)"
+    >
+    </nz-tree>`
+})
+
+export class NzDemoTreeMethodComponent implements OnInit {
+  @ViewChild('nzTree') nzTree: NzTreeComponent;
+  expandKeys = [ '1001', '10001' ];
+  checkedKeys = [ '10001' ];
+  selectedKeys = [ '10001', '100011' ];
+  expandDefault = false;
+  nodes = [
+    new NzTreeNode({
+      title   : 'root1',
+      key     : '1001',
+      children: [
+        {
+          title   : 'child1',
+          key     : '10001',
+          children: [
+            {
+              title   : 'child1.1',
+              key     : '100011',
+              children: []
+            },
+            {
+              title   : 'child1.2',
+              key     : '100012',
+              children: [
+                {
+                  title   : 'grandchild1.2.1',
+                  key     : '1000121',
+                  isLeaf  : true,
+                  disabled: true
+                },
+                {
+                  title : 'grandchild1.2.2',
+                  key   : '1000122',
+                  isLeaf: true
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    })
+  ];
+
+  mouseAction(name: string, event: NzFormatEmitEvent): void {
+    console.log(name, event);
+    // just for demo, should get in ngAfterViewInit
+    console.log('checkedNodes: %o', this.nzTree.getCheckedNodeList());
+    console.log('selectedNodes: %o', this.nzTree.getSelectedNodeList());
+    console.log(this.nzTree.nzTreeService.getCheckedNodeList());
+  }
+
+  ngOnInit(): void {
+  }
+}
diff --git a/components/tree/demo/search.ts b/components/tree/demo/search.ts
@@ -72,16 +72,13 @@ export class NzDemoTreeSearchComponent {
           selectable: false,
           children  : [
             {
-              title: 'grandchild2.2.1',
-              key  : '100221'
+              title : 'grandchild2.2.1',
+              key   : '100221',
+              isLeaf: true
             }
           ]
         }
       ]
-    }),
-    new NzTreeNode({
-      title: 'root3',
-      key  : '1003'
     })
   ];
 

diff --git a/components/tree/doc/index.en-US.md b/components/tree/doc/index.en-US.md
@@ -21,6 +21,7 @@ Almost anything can be represented in a tree structure. Examples include directo
 | nzAsyncData | Load data asynchronously (should be used with NzTreeNode.addChildren(...)) | boolean | false |
 | nzDraggable | Specifies whether this Tree is draggable (IE > 8) | boolean | false |
 | nzMultiple | Allows selecting multiple treeNodes | boolean | false |
+| nzCheckStrictly | Check treeNode precisely; parent treeNode and children treeNodes are not associated | boolean | false |
 | nzDefaultExpandAll | Whether to expand all treeNodes by default | boolean | false |
 | nzDefaultExpandedKeys | Specify the keys of the default expanded treeNodes | string\[] | \[] |
 | 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
 | nzOnDragLeave | Callback function for when the onDragLeave event occurs | EventEmitter<NzFormatEmitEvent\> | - |
 | nzOnDrop | Callback function for when the onDrop event occurs | EventEmitter<NzFormatEmitEvent\> | - |
 | nzOnDragEnd | Callback function for when the onDragEnd event occurs | EventEmitter<NzFormatEmitEvent\> | - |
+| getCheckedNodeList | get checked nodes(merged) | NzTreeNode[] | [] |
+| getSelectedNodeList | get selected nodes | NzTreeNode[] | [] |
 
 ### NzTreeNodeOptions props
 
@@ -65,6 +68,8 @@ Almost anything can be represented in a tree structure. Examples include directo
 | dragNode? | Current drag node (existing when dragged) | NzTreeNode | null |
 | selectedKeys? | Selected node list (exist when clicked) | array<NzTreeNode\> | [] |
 | checkedKeys? | Checked node list (exist when click checkbox) | array<NzTreeNode\> | [] |
+| flatCheckedKeys? | Flatten the Checked nodes list (exist when click checkbox) | array<NzTreeNode\> | [] |
+| matchededKeys? | matched nodes while searching | array<NzTreeNode\> | [] |
 
 ### NzFormatBeforeDropEvent props
 

diff --git a/components/tree/doc/index.zh-CN.md b/components/tree/doc/index.zh-CN.md
@@ -22,6 +22,7 @@ subtitle: 树形控件
 | nzAsyncData | 是否异步加载(显示加载状态) | boolean | false |
 | nzDraggable | 设置节点可拖拽（IE>8） | boolean | false |
 | nzMultiple | 支持点选多个节点（节点本身） | boolean | false |
+| nzCheckStrictly | checkable状态下节点选择完全受控（父子节点选中状态不再关联） | boolean | false |
 | nzDefaultExpandAll | 默认展开所有树节点 | boolean | false |
 | nzDefaultExpandedKeys | 默认展开指定的树节点 | string\[] | \[] |
 | nzDefaultCheckedKeys | 默认选中复选框的树节点 | string\[] | \[] |
@@ -40,6 +41,8 @@ subtitle: 树形控件
 | nzOnDragLeave | dragleave 触发时调用 | EventEmitter<NzFormatEmitEvent\> | - |
 | nzOnDrop | drop 触发时调用 | EventEmitter<NzFormatEmitEvent\> | - |
 | nzOnDragEnd | dragend 触发时调用 | EventEmitter<NzFormatEmitEvent\> | - |
+| getCheckedNodeList | 获取组件 checkBox 被点击选中的节点 | NzTreeNode[] | [] |
+| getSelectedNodeList | 获取组件被选中的节点 | NzTreeNode[] | [] |
 
 ### NzTreeNodeOptions props