From e76b2fadb1f0ccbb4d020ed0a60a66c702aa54ca Mon Sep 17 00:00:00 2001 From: simplejason Date: Sat, 2 Jun 2018 13:46:38 +0800 Subject: [PATCH] fix(module: tree): support custom property [WIP] fix(module: tree): support custom property [WIP] fix(module: tree): support custom property --- components/tree/demo/dir-tree.ts | 21 +++++++++++++++++++-- components/tree/doc/index.en-US.md | 2 +- components/tree/doc/index.zh-CN.md | 2 ++ components/tree/nz-tree-node.ts | 2 ++ 4 files changed, 24 insertions(+), 3 deletions(-) diff --git a/components/tree/demo/dir-tree.ts b/components/tree/demo/dir-tree.ts index 1d70330d2e..cc38030e67 100644 --- 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'; {{node.title}} + {{node?.origin?.author | lowercase}} created at 2018-04-01 {{node.title}} + {{node?.origin?.author | lowercase}} modified at 2018-05-01 @@ -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,24 +91,29 @@ 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 @@ -109,6 +121,7 @@ export class NzDemoTreeDirTreeComponent implements OnInit { { 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 index 1463ba8b0e..08e7ae3d94 100644 --- 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 index 4195db5714..456a4e572c 100644 --- 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` 属性取得。 \ No newline at end of file diff --git a/components/tree/nz-tree-node.ts b/components/tree/nz-tree-node.ts index 3e4e3b917f..9b569cc223 100644 --- 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 {