feat(module:tree): add tree component (#1147)

NG-ZORRO · Mar 15, 2018 · 7ca5de3 · 7ca5de3
1 parent 30d6756
commit 7ca5de3
Show file tree

Hide file tree

Showing 27 changed files with 2,413 additions and 2 deletions.
diff --git a/components/components.less b/components/components.less
@@ -44,4 +44,5 @@
 @import "./transfer/style/index.less";
 @import "./upload/style/index.less";
 @import "./auto-complete/style/index.less";
-@import "./cascader/style/index.less";
+@import "./cascader/style/index.less";
+@import "./tree/style/index.less";
diff --git a/components/ng-zorro-antd.module.ts b/components/ng-zorro-antd.module.ts
@@ -47,6 +47,7 @@ import { NzTagModule } from './tag/nz-tag.module';
 import { NzTimelineModule } from './timeline/nz-timeline.module';
 import { NzToolTipModule } from './tooltip/nz-tooltip.module';
 import { NzTransferModule } from './transfer/nz-transfer.module';
+import { NzTreeModule } from './tree/nz-tree.module';
 import { NzUploadModule } from './upload/nz-upload.module';
 
 export * from './affix';
@@ -95,6 +96,7 @@ export * from './notification';
 export * from './popconfirm';
 export * from './modal';
 export * from './cascader';
+export * from './tree';
 
 @NgModule({
   exports: [
@@ -143,7 +145,8 @@ export * from './cascader';
     NzPopconfirmModule,
     NzModalModule,
     NzBackTopModule,
-    NzCascaderModule
+    NzCascaderModule,
+    NzTreeModule
   ]
 })
 export class NgZorroAntdModule {

diff --git a/components/tree/demo/basic.md b/components/tree/demo/basic.md
@@ -0,0 +1,19 @@
+---
+order: 0
+title:
+  zh-CN: 基本
+  en-US: basic
+---
+
+## zh-CN
+
+最简单的用法，展示可勾选，可选中，禁用，默认展开等功能。
+
+## en-US
+
+The most basic usage, tell you how to use checkable, selectable, disabled, defaultExpandKeys, and etc.
+
+
+<style>
+
+</style>
diff --git a/components/tree/demo/basic.ts b/components/tree/demo/basic.ts
@@ -0,0 +1,91 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'nz-demo-tree-basic',
+    template: `
+        <nz-tree [nzTreeData]="nodes"
+                 [nzCheckable]="true"
+                 [nzMultiple]="true"
+                 [nzDefaultExpandedKeys]="expandKeys"
+                 [nzDefaultCheckedKeys]="checkedKeys"
+                 [nzDefaultSelectedKeys]="selectedKeys"
+                 [nzDefaultExpandAll]="expandDefault"
+                 (nzClick)="mouseAction('click',$event)">
+        </nz-tree>`
+})
+export class NzDemoTreeBasicComponent implements OnInit {
+    expandKeys = ['1001', '10001'];
+    checkedKeys = ['10001', '100012'];
+    selectedKeys = ['10001', '100011'];
+    expandDefault = false;
+    nodes = [
+        {
+            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,
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    title: 'child2',
+                    key: '10002'
+                }
+            ]
+        },
+        {
+            title: 'root2',
+            key: '1002',
+            children: [
+                {
+                    title: 'child2.1',
+                    key: '10021',
+                    children: [],
+                    disableCheckbox: true,
+                },
+                {
+                    title: 'child2.2',
+                    key: '10022',
+                    children: [
+                        {
+                            title: 'grandchild2.2.1',
+                            key: '100221'
+                        }
+                    ]
+                }
+            ]
+        },
+        {title: 'root3', key: '1003'}
+    ];
+
+    mouseAction(name: string, event: any): void {
+        console.log(name, event);
+    }
+
+    ngOnInit(): void {
+    }
+}
diff --git a/components/tree/demo/customized-icon.md b/components/tree/demo/customized-icon.md
@@ -0,0 +1,15 @@
+---
+order: 4
+debug: true
+title:
+  zh-CN: 自定义图标
+  en-US: customize
+---
+
+## zh-CN
+
+可以针对不同节点采用样式覆盖的方式定制图标，双击展开。
+
+## en-US
+
+You can customize icons for different nodes by styles override and expand the node using dblclick.
diff --git a/components/tree/demo/customized-icon.ts b/components/tree/demo/customized-icon.ts
@@ -0,0 +1,103 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'nz-demo-tree-customized-icon',
+    template: `
+        <nz-tree [nzTreeData]="nodes"
+                 [nzMultiple]="true"
+                 [nzShowExpand]="false"
+                 [nzCheckable]="true"
+                 [nzDraggable]="true"
+                 (nzClick)="mouseAction('click', $event)"
+                 (nzDblClick)="mouseAction('dblclick',$event)"
+                 (nzExpandChange)="mouseAction('expand', $event)"
+        >
+            <ng-template #nzTreeTemplate let-node>
+                <span draggable [class.active]="node.isSelected">
+                    <i class="anticon anticon-smile-o" *ngIf="node.isExpanded"></i>
+                    <i class="anticon anticon-frown-o" *ngIf="!node.isExpanded"></i> {{node.title}}</span>
+            </ng-template>
+        </nz-tree>`,
+    styles: [`
+        .active {
+            background-color: #bae7ff;
+        }
+    `]
+})
+export class NzDemoTreeCustomizedIconComponent implements OnInit {
+    nodes = [
+        {
+            title: 'root1',
+            key: '1001',
+            children: [
+                {
+                    title: 'child1',
+                    key: '10001',
+                    children: [
+                        {
+                            title: 'child1.1',
+                            key: '100011',
+                            selected: true,
+                            children: []
+                        },
+                        {
+                            title: 'child1.2',
+                            key: '100012',
+                            children: [
+                                {
+                                    title: 'grandchild1.2.1',
+                                    key: '1000121',
+                                    isLeaf: true,
+                                    checked: true,
+                                    disabled: true
+                                },
+                                {
+                                    title: 'grandchild1.2.2',
+                                    key: '1000122',
+                                    isLeaf: true,
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    title: 'child2',
+                    key: '10002'
+                }
+            ]
+        },
+        {
+            title: 'root2',
+            key: '1002',
+            children: [
+                {
+                    title: 'child2.1',
+                    key: '10021',
+                    children: []
+                },
+                {
+                    title: 'child2.2',
+                    key: '10022',
+                    children: [
+                        {
+                            title: 'grandchild2.2.1',
+                            key: '100221',
+                        }
+                    ]
+                }
+            ]
+        },
+        {title: 'root3', key: '1003'}
+    ];
+
+    mouseAction(name: string, e: any): void {
+        console.log(name, e);
+        if (name === 'dblclick') {
+            e.node.isExpanded = !e.node.isExpanded;
+        }
+    }
+
+    ngOnInit(): void {
+
+    }
+}
diff --git a/components/tree/demo/draggable.md b/components/tree/demo/draggable.md
@@ -0,0 +1,14 @@
+---
+order: 1
+title:
+  zh-CN: 拖动示例
+  en-US: draggable
+---
+
+## zh-CN
+
+将节点拖拽到其他节点内部或前后。
+
+## en-US
+
+Drag treeNode to insert after the other treeNode or insert into the other parent TreeNode.
diff --git a/components/tree/demo/draggable.ts b/components/tree/demo/draggable.ts
@@ -0,0 +1,86 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'nz-demo-tree-draggable',
+    template: `
+        <nz-tree [nzTreeData]="nodes"
+                 (nzExpandChange)="mouseAction('expand',$event)"
+                 [nzDraggable]="true"
+                 (nzOnDragStart)="mouseAction('dragstart',$event)"
+                 (nzOnDragEnter)="mouseAction('enter',$event)"
+                 (nzOnDragLeave)="mouseAction('leave', $event)"
+                 (nzOnDrop)="mouseAction('drop', $event)"
+                 (nzOnDragEnd)="mouseAction('end', $event)">
+        </nz-tree>`
+})
+export class NzDemoTreeDraggableComponent {
+    nodes = [
+        {
+            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,
+                                    checked: true,
+                                    disabled: true
+                                },
+                                {
+                                    title: 'grandchild1.2.2',
+                                    key: '1000122',
+                                    isLeaf: true,
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    title: 'child2',
+                    key: '10002'
+                }
+            ]
+        },
+        {
+            title: 'root2',
+            key: '1002',
+            children: [
+                {
+                    title: 'child2.1',
+                    key: '10021',
+                    children: []
+                },
+                {
+                    title: 'child2.2',
+                    key: '10022',
+                    children: [
+                        {
+                            title: 'grandchild2.2.1',
+                            key: '100221',
+                        }
+                    ]
+                }
+            ]
+        },
+        {title: 'root3', key: '1003'}
+    ];
+
+    mouseAction(name: string, e: any): void {
+        if (name !== 'over') {
+            console.log(name, e);
+        }
+    }
+}
diff --git a/components/tree/demo/dynamic.md b/components/tree/demo/dynamic.md
@@ -0,0 +1,14 @@
+---
+order: 5
+title:
+  zh-CN: 异步数据加载
+  en-US: load data asynchronously
+---
+
+## zh-CN
+
+点击展开节点，动态加载数据，直到执行 addChildren() 方法取消加载状态。
+
+## en-US
+
+To load data asynchronously when click to expand a treeNode, loading state keeps until excute addChildren().