fix(module: tree): support custom property (#1584)

close #1580
NG-ZORRO · Jun 2, 2018 · 1ca696a · 1ca696a
1 parent ec4be6b
commit 1ca696a
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 3 deletions.
diff --git a/components/tree/demo/dir-tree.ts b/components/tree/demo/dir-tree.ts
@@ -15,10 +15,12 @@ import { NzFormatEmitEvent, NzTreeNode } from 'ng-zorro-antd';
             <i class="anticon anticon-folder" *ngIf="!node.isExpanded" (click)="openFolder(node)"></i>
             <i class="anticon anticon-folder-open" *ngIf="node.isExpanded" (click)="openFolder(node)"></i>
             <span class="folder-name">{{node.title}}</span>
+            <span class="folder-desc">{{node?.origin?.author | lowercase}} created at 2018-04-01</span>
           </span>
           <span *ngIf="node.isLeaf">
             <i class="anticon anticon-file"></i>
             <span class="file-name">{{node.title}}</span>
+            <span class="file-desc">{{node?.origin?.author | lowercase}} modified at 2018-05-01</span>
           </span>
         </span>
       </ng-template>
@@ -60,7 +62,7 @@ import { NzFormatEmitEvent, NzTreeNode } from 'ng-zorro-antd';
     }
 
     .active {
-      background: #1890ff;
+      background: #87CEFF;
       color: #fff;
     }
 
@@ -70,10 +72,15 @@ import { NzFormatEmitEvent, NzTreeNode } from 'ng-zorro-antd';
       opacity: 0.7;
     }
 
-    .file-name, .folder-name {
+    .file-name, .folder-name, .file-desc, .folder-desc {
       margin-left: 4px;
     }
 
+    .file-desc, .folder-desc {
+      padding: 2px 8px;
+      background: rgba(0,0,0,.15);
+      color: #FFFFFF;
+    }
   ` ]
 })
 export class NzDemoTreeDirTreeComponent implements OnInit {
@@ -84,31 +91,37 @@ export class NzDemoTreeDirTreeComponent implements OnInit {
     new NzTreeNode({
       title   : 'root1',
       key     : '1001',
+      author  : 'ANGULAR',
       expanded: true,
       children: [
         {
           title   : 'child1',
           key     : '10001',
+          author  : 'ZORRO',
           children: [
             {
               title   : 'child1.1',
               key     : '100011',
+              author  : 'ZORRO',
               children: []
             },
             {
               title   : 'child1.2',
               key     : '100012',
+              author  : 'ZORRO',
               children: [
                 {
                   title   : 'grandchild1.2.1',
                   key     : '1000121',
+                  author  : 'ZORRO-FANS',
                   isLeaf  : true,
                   checked : true,
                   disabled: true
                 },
                 {
                   title : 'grandchild1.2.2',
                   key   : '1000122',
+                  author: 'ZORRO-FANS',
                   isLeaf: true
                 }
               ]
@@ -120,19 +133,23 @@ export class NzDemoTreeDirTreeComponent implements OnInit {
     new NzTreeNode({
       title   : 'root2',
       key     : '1002',
+      author  : 'ANGULAR',
       children: [
         {
           title : 'child2.1',
           key   : '10021',
+          author: 'ZORRO-FANS',
           isLeaf: true
         },
         {
           title   : 'child2.2',
           key     : '10022',
+          author  : 'ZORRO',
           children: [
             {
               title : 'grandchild2.2.1',
               key   : '100221',
+              author: 'ZORRO-FANS',
               isLeaf: true
             }
           ]

diff --git a/components/tree/doc/index.en-US.md b/components/tree/doc/index.en-US.md
@@ -105,4 +105,4 @@ Almost anything can be represented in a tree structure. Examples include directo
 | clearChildren | clear the treeNode's children | function | void |
 
 ## Note
-
+`NzTreeNodeOptions` accepts your customized properties，use NzTreeNode.origin to get them.
diff --git a/components/tree/doc/index.zh-CN.md b/components/tree/doc/index.zh-CN.md
@@ -58,6 +58,7 @@ subtitle: 树形控件
 | selectable | 设置节点是否可被选中 | boolean | true |
 | disabled | 设置是否禁用节点(不可进行任何操作) | boolean | false |
 | disableCheckbox | 设置节点禁用 Checkbox | boolean | false |
+| [key: string] | 自定义数据 | any | - |
 
 ### NzFormatEmitEvent props
 
@@ -105,3 +106,4 @@ subtitle: 树形控件
 | clearChildren | 清除子节点 | function | void |
 
 ## 注意
+`NzTreeNodeOptions` 可以接受用户自定义属性，可通过 `NzTreeNode` 的 `origin` 属性取得。
diff --git a/components/tree/nz-tree-node.ts b/components/tree/nz-tree-node.ts
@@ -9,6 +9,8 @@ export interface NzTreeNodeOptions {
   disableCheckbox?: boolean;
   expanded?: boolean;
   children?: NzTreeNodeOptions[];
+  // tslint:disable-next-line:no-any
+  [key: string]: any;
 }
 
 export class NzTreeNode {