diff --git a/devui/toggle/demo/toggle-demo.module.ts b/devui/toggle/demo/toggle-demo.module.ts
index 1279470e..4315ac48 100755
--- a/devui/toggle/demo/toggle-demo.module.ts
+++ b/devui/toggle/demo/toggle-demo.module.ts
@@ -8,7 +8,7 @@ import { DevUIApiModule } from 'ng-devui/shared/devui-api/devui-api.module';
import { DevUICodeboxModule } from 'ng-devui/shared/devui-codebox';
import { ToggleModule } from 'ng-devui/toggle';
import { TranslateModule } from '@ngx-translate/core';
-import { DDemoNavModule } from 'src/app/component/d-demo-nav.module';
+import { DDemoNavModule } from 'devui-commons/src/demo-nav/d-demo-nav.module';
import { BasicComponent } from './basic/basic.component';
import { CallbackComponent } from './callback/callback.component';
import { CustomComponent } from './custom/custom.component';
diff --git a/devui/toggle/toggle.component.scss b/devui/toggle/toggle.component.scss
index c93a9493..ad29e0b5 100755
--- a/devui/toggle/toggle.component.scss
+++ b/devui/toggle/toggle.component.scss
@@ -1,5 +1,5 @@
@import '../style/theme/color';
-@import '../style/theme/font';
+@import '../style/core/font';
@import '../style/core/animation';
@import '../style/theme/corner';
diff --git a/devui/tooltip/demo/tooltip-demo.module.ts b/devui/tooltip/demo/tooltip-demo.module.ts
index 03af2a1b..4654a291 100755
--- a/devui/tooltip/demo/tooltip-demo.module.ts
+++ b/devui/tooltip/demo/tooltip-demo.module.ts
@@ -7,7 +7,7 @@ import { DevUIApiModule } from 'ng-devui/shared/devui-api/devui-api.module';
import { DevUICodeboxModule } from 'ng-devui/shared/devui-codebox';
import { TooltipModule } from 'ng-devui/tooltip';
import { TranslateModule } from '@ngx-translate/core';
-import { DDemoNavModule } from 'src/app/component/d-demo-nav.module';
+import { DDemoNavModule } from 'devui-commons/src/demo-nav/d-demo-nav.module';
import { BasicComponent } from './basic/basic.component';
import { DelayComponent } from './delay/delay.component';
import { TooltipDemoComponent } from './tooltip-demo.component';
diff --git a/devui/transfer/demo/transfer-demo.module.ts b/devui/transfer/demo/transfer-demo.module.ts
index 752189e6..35a38ac8 100644
--- a/devui/transfer/demo/transfer-demo.module.ts
+++ b/devui/transfer/demo/transfer-demo.module.ts
@@ -8,7 +8,7 @@ import { DevUICodeboxModule } from 'ng-devui/shared/devui-codebox';
import { ToggleModule } from 'ng-devui/toggle';
import { TransferModule } from 'ng-devui/transfer';
import { TranslateModule } from '@ngx-translate/core';
-import { DDemoNavModule } from 'src/app/component/d-demo-nav.module';
+import { DDemoNavModule } from 'devui-commons/src/demo-nav/d-demo-nav.module';
import { TransferDemoBaseComponent } from './basic/transfer-demo-base.component';
import { TransferDemoCustomComponent } from './custom/transfer-demo-custom.component';
import { TransferDemoSearchComponent } from './search/transfer-demo-search.component';
diff --git a/devui/tree-select/demo/basic/tree-select-basic.component.html b/devui/tree-select/demo/basic/tree-select-basic.component.html
index d90c311f..fe9f439c 100644
--- a/devui/tree-select/demo/basic/tree-select-basic.component.html
+++ b/devui/tree-select/demo/basic/tree-select-basic.component.html
@@ -1,5 +1,5 @@
+
Standard: Multiple Select
@@ -28,7 +28,7 @@
Standard: Multiple Select
>
-
Custom Width: Single Select
+
+
diff --git a/devui/tree-select/demo/basic/tree-select-basic.component.ts b/devui/tree-select/demo/basic/tree-select-basic.component.ts
index 2eaf480b..050ca742 100644
--- a/devui/tree-select/demo/basic/tree-select-basic.component.ts
+++ b/devui/tree-select/demo/basic/tree-select-basic.component.ts
@@ -7,161 +7,159 @@ import { Component } from '@angular/core';
export class TreeSelectBasicComponent {
data1 = [{
- 'title': 'parent 1',
- 'id': 1
+ title: 'parent 1',
+ id: 1
}, {
- 'title': 'parent 2',
- 'children': [{
- 'title': 'parent 2-1',
- 'children': [{
- 'title': 'leaf 2-1-1',
- 'id': 3
+ title: 'parent 2',
+ children: [{
+ title: 'parent 2-1',
+ children: [{
+ title: 'leaf 2-1-1',
+ id: 3
}, {
- 'title': 'leaf 2-1-2',
- 'id': 4
+ title: 'leaf 2-1-2',
+ id: 4
}],
- 'id': 2
+ id: 2
}, {
- 'title': 'parent 2-2',
- 'children': [{
- 'title': 'leaf 2-2-1',
- 'id': 6
+ title: 'parent 2-2',
+ children: [{
+ title: 'leaf 2-2-1',
+ id: 6
}, {
- 'title': 'leaf 2-2-2',
- 'id': 7
+ title: 'leaf 2-2-2',
+ id: 7
}],
- 'id': 5
+ id: 5
}],
- 'id': 18
+ id: 18
}, {
- 'title': 'parent 3',
- 'open': true,
- 'halfChecked': true,
- 'children': [{
- 'title': 'leaf 3-1',
- 'id': 9
+ title: 'parent 3',
+ open: true,
+ children: [{
+ title: 'leaf 3-1',
+ id: 9
}, {
- 'title': 'leaf 3-2',
- 'disabled': true,
- 'isChecked': true,
- 'id': 10
+ title: 'leaf 3-2',
+ disabled: true,
+ id: 10
}, {
- 'title': 'leaf 3-3',
- 'disabled': true,
- 'id': 11
+ title: 'leaf 3-3',
+ disabled: true,
+ id: 11
}],
- 'id': 8
+ id: 8
}, {
- 'title': 'parent 4',
- 'disabled': true,
- 'children': [{
- 'title': 'leaf 4-1',
- 'id': 13
+ title: 'parent 4',
+ disabled: true,
+ children: [{
+ title: 'leaf 4-1',
+ id: 13
}, {
- 'title': 'leaf 4-2',
- 'id': 14
+ title: 'leaf 4-2',
+ id: 14
}],
- 'id': 12
+ id: 12
}, {
- 'title': 'parent 5',
- 'children': [{
- 'title': 'leaf 5-1',
- 'id': 16
+ title: 'parent 5',
+ children: [{
+ title: 'leaf 5-1',
+ id: 16
}, {
- 'title': 'leaf 5-2',
- 'id': 17
+ title: 'leaf 5-2',
+ id: 17
}],
- 'id': 15
+ id: 15
}];
data2 = [{
- 'title': 'parent 1',
- 'id': 1
+ title: 'parent 1',
+ id: 1
}, {
- 'title': 'parent 2',
- 'children': [{
- 'title': 'parent 2-1',
- 'children': [{
- 'title': 'leaf 2-1-1',
- 'id': 3
+ title: 'parent 2',
+ children: [{
+ title: 'parent 2-1',
+ children: [{
+ title: 'leaf 2-1-1',
+ id: 3
}, {
- 'title': 'leaf 2-1-2',
- 'id': 4
+ title: 'leaf 2-1-2',
+ id: 4
}],
- 'id': 2
+ id: 2
}, {
- 'title': 'parent 2-2',
- 'children': [{
- 'title': 'leaf 2-2-1',
- 'id': 6
+ title: 'parent 2-2',
+ children: [{
+ title: 'leaf 2-2-1',
+ id: 6
}, {
- 'title': 'leaf 2-2-2',
- 'id': 7
+ title: 'leaf 2-2-2',
+ id: 7
}],
- 'id': 5
+ id: 5
}],
- 'id': 18
+ id: 18
}, {
- 'title': 'parent 3',
- 'open': true,
- 'halfChecked': true,
- 'children': [{
- 'title': 'leaf 3-1',
- 'id': 9
+ title: 'parent 3',
+ open: true,
+ children: [{
+ title: 'leaf 3-1',
+ id: 9
}, {
- 'title': 'leaf 3-2',
- 'disabled': true,
- 'isChecked': true,
- 'id': 10
+ title: 'leaf 3-2',
+ disabled: true,
+ id: 10
}, {
- 'title': 'leaf 3-3',
- 'disabled': true,
- 'id': 11
+ title: 'leaf 3-3',
+ disabled: true,
+ id: 11
}],
- 'id': 8
+ id: 8
}, {
- 'title': 'parent 4',
- 'disabled': true,
- 'children': [{
- 'title': 'leaf 4-1',
- 'id': 13
+ title: 'parent 4',
+ disabled: true,
+ children: [{
+ title: 'leaf 4-1',
+ id: 13
}, {
- 'title': 'leaf 4-2',
- 'id': 14
+ title: 'leaf 4-2',
+ id: 14
}],
- 'id': 12
+ id: 12
}, {
- 'title': 'parent 5',
- 'children': [{
- 'title': 'leaf 5-1',
- 'id': 16
+ title: 'parent 5',
+ children: [{
+ title: 'leaf 5-1',
+ id: 16
}, {
- 'title': 'leaf 5-2',
- 'id': 17
+ title: 'leaf 5-2',
+ id: 17
}],
- 'id': 15
+ id: 15
},
{
- 'title': 'LazyLoad Parent',
- 'isParent': true,
- 'isOpen': false,
- 'id': 20
+ title: 'LazyLoad Parent',
+ isParent: true,
+ isOpen: false,
+ id: 20
}];
value1 = {
- 'title': 'leaf 4-1',
- 'id': 13
+ title: 'leaf 4-1',
+ id: 13
};
- value2 = [{
- 'title': 'leaf 4-2',
- 'id': 14
- }, {
- 'title': 'leaf 4-1',
- 'id': 13
- }, {
- 'title': 'leaf 2-1-1',
- 'id': 3
- }];
+ value2 = [
+ {
+ title: 'leaf 4-2',
+ id: 14
+ }, {
+ title: 'leaf 4-1',
+ id: 13
+ }, {
+ title: 'leaf 2-1-1',
+ id: 3
+ }
+ ];
showSelected($event: Event) {
console.log('event emitted: ', $event);
}
@@ -172,14 +170,14 @@ export class TreeSelectBasicComponent {
nodeToggleEvent(node) {
if (node.id === 20 && node.data.isOpen) {
this.data2[5].children = [{
- 'title': 'LazyLoad leaf-1',
- 'id': 21
+ title: 'LazyLoad leaf-1',
+ id: 21
}, {
- 'title': 'LazyLoad leaf-2',
- 'id': 22
+ title: 'LazyLoad leaf-2',
+ id: 22
}, {
- 'title': 'LazyLoad leaf-3',
- 'id': 23
+ title: 'LazyLoad leaf-3',
+ id: 23
}];
this.data2 = [...this.data2];
}
diff --git a/devui/tree-select/demo/tree-select-demo.module.ts b/devui/tree-select/demo/tree-select-demo.module.ts
index f69300c1..945480fb 100755
--- a/devui/tree-select/demo/tree-select-demo.module.ts
+++ b/devui/tree-select/demo/tree-select-demo.module.ts
@@ -9,7 +9,7 @@ import { DevUIApiModule } from 'ng-devui/shared/devui-api/devui-api.module';
import { DevUICodeboxModule } from 'ng-devui/shared/devui-codebox';
import { TreeSelectModule } from 'ng-devui/tree-select';
import { TranslateModule } from '@ngx-translate/core';
-import { DDemoNavModule } from 'src/app/component/d-demo-nav.module';
+import { DDemoNavModule } from 'devui-commons/src/demo-nav/d-demo-nav.module';
import { TreeSelectAppendToComponent, TreeSelectModalComponent } from '../demo/append-to/tree-select-append-to.component';
import { TreeSelectBasicComponent } from '../demo/basic/tree-select-basic.component';
import { TreeSelectCustomIconComponent } from '../demo/custom-icon/tree-select-custom-icon.component';
diff --git a/devui/tree-select/tree-select.component.scss b/devui/tree-select/tree-select.component.scss
index 92cf49e8..70b35cc8 100755
--- a/devui/tree-select/tree-select.component.scss
+++ b/devui/tree-select/tree-select.component.scss
@@ -155,7 +155,7 @@
.devui-select-item {
color: $devui-text;
- line-height: 1.5;
+ line-height: 16px;
background-color: $devui-label-bg;
border-radius: $devui-border-radius;
border: 1px solid $devui-label-bg;
diff --git a/devui/tree-select/tree-select.component.ts b/devui/tree-select/tree-select.component.ts
index 39dde76b..d1230eed 100755
--- a/devui/tree-select/tree-select.component.ts
+++ b/devui/tree-select/tree-select.component.ts
@@ -303,8 +303,9 @@ export class TreeSelectComponent implements ControlValueAccessor, OnInit, AfterV
}
private resolveParentNode(treeNodes: ITreeItem[]): boolean[] {
- const childrenFullCheckedCount = treeNodes.filter(_ => _.isChecked).length;
- const childrenCheckedCount = treeNodes.filter(_ => _.isChecked || _.halfChecked).length;
+ const enableParentNodeCheckByChild = this.checkableRelation === 'both' || this.checkableRelation === 'upward';
+ const childrenFullCheckedCount = enableParentNodeCheckByChild && treeNodes.filter(_ => _.isChecked).length;
+ const childrenCheckedCount = enableParentNodeCheckByChild && treeNodes.filter(_ => _.isChecked || _.halfChecked).length;
return [
childrenFullCheckedCount > 0 && treeNodes.length === childrenFullCheckedCount,
childrenCheckedCount > 0 && treeNodes.length > childrenFullCheckedCount
diff --git a/devui/tree/demo/basic/basic.component.html b/devui/tree/demo/basic/basic.component.html
index 81da430f..c6dfab50 100755
--- a/devui/tree/demo/basic/basic.component.html
+++ b/devui/tree/demo/basic/basic.component.html
@@ -1,3 +1 @@
-
Basic Tree
-
-
ChangeData
+
diff --git a/devui/tree/demo/basic/basic.component.ts b/devui/tree/demo/basic/basic.component.ts
index 192e3966..accafff8 100755
--- a/devui/tree/demo/basic/basic.component.ts
+++ b/devui/tree/demo/basic/basic.component.ts
@@ -1,5 +1,5 @@
import { Component, ViewChild } from '@angular/core';
-import { ITreeItem, TreeComponent, TreeNode } from 'ng-devui/tree';
+import { TreeComponent, TreeNode } from 'ng-devui/tree';
@Component({
selector: 'd-basic',
@@ -7,11 +7,10 @@ import { ITreeItem, TreeComponent, TreeNode } from 'ng-devui/tree';
})
export class BasicComponent {
@ViewChild('basicTree', { static: true }) basicTree: TreeComponent;
- data1 = [
+ data = [
{
title: 'parent node 1 - expanded',
open: true,
- disabled: true,
items: [
{
title: 'parent node 11 - folded',
@@ -32,7 +31,6 @@ export class BasicComponent {
},
{
title: 'parent node 12 - folded',
- disableToggle: true,
items: [
{
title: 'leaf node 121'
@@ -48,10 +46,6 @@ export class BasicComponent {
}
]
},
- {
- title: 'parent node 13 - without children - dynamic loading',
- isParent: true
- }
]
},
{
@@ -111,85 +105,13 @@ export class BasicComponent {
}
]
},
- {
- id: 'dynamicNode',
- title: 'parent node 3 - without children - dynamic loading',
- isParent: true,
- data: {
- id: 'newChildNode',
- name: 'new child node'
- }
- }
];
onNodeSelected(treeNode: TreeNode) {
- console.log('selected: ', treeNode);
+ console.log('selected', treeNode);
}
onNodeToggled(treeNode: TreeNode) {
- this.loadChildren(treeNode);
- }
-
- changeTree() {
- this.data1 = [{
- id: 'dynamicNode2',
- title: 'parent node 4 - dynamic loading',
- isParent: true,
- data: {
- id: 'newChildNode2',
- name: 'new child node 2'
- }
- }];
- }
-
- loadChildren(treeNode: TreeNode) {
- if (this.basicTree.treeFactory.getChildrenById(treeNode.id).length === 0 && treeNode.data.isParent) {
- if (!this.basicTree.treeFactory.nodes[treeNode.id].data.loading) {
- this.basicTree.treeFactory.startLoading(treeNode.id);
- this.getMockData()
- .then((result: Array
) => {
- this.basicTree.treeFactory.endLoading(treeNode.id);
- this.basicTree.treeFactory.mapTreeItems({ treeItems: result, parentId: treeNode.id });
- console.log('loaded children: ', this.basicTree.treeFactory.getChildrenById(treeNode.id));
- })
- .catch(() => {
- this.basicTree.treeFactory.endLoading(treeNode.id);
- });
- }
- }
- }
-
- getMockData() {
- return new Promise(resolve => {
- setTimeout(() => {
- resolve([
- {
- title: 'leaf node 311',
- data: {
- id: 'extraNode',
- name: 'extra node'
- }
- },
- {
- title: 'leaf node 312',
- },
- {
- title: 'leaf node 313--expanded',
- open: true,
- items: [
- {
- title: 'leaf node 313-1',
- },
- {
- title: 'leaf node 313-2',
- },
- {
- title: 'leaf node 313-3',
- }
- ]
- }
- ]);
- }, 3000);
- });
+ console.log('Toggled', treeNode);
}
}
diff --git a/devui/tree/demo/check-control/check-control.component.html b/devui/tree/demo/check-control/check-control.component.html
index 4296be7b..03e4439b 100644
--- a/devui/tree/demo/check-control/check-control.component.html
+++ b/devui/tree/demo/check-control/check-control.component.html
@@ -1,14 +1,14 @@
-Control node checkable
-
+Default Checkable Tree
+
-checkableRelation = "both"
-
+Set checkableRelation = "upward"
+
-checkableRelation = "upward"
-
+Set checkableRelation = "downward"
+
-checkableRelation = "downward"
-
+Set checkableRelation = "none"
+
-checkableRelation = "none"
-
+Use "showCheckbox" to control checkbox display
+
diff --git a/devui/tree/demo/check-control/check-control.component.ts b/devui/tree/demo/check-control/check-control.component.ts
index f2611407..fef16734 100644
--- a/devui/tree/demo/check-control/check-control.component.ts
+++ b/devui/tree/demo/check-control/check-control.component.ts
@@ -2,101 +2,101 @@ import { Component, OnInit } from '@angular/core';
export const source = [
{
- name: 'parent node 1 - expanded',
+ title: 'parent node 1 - expanded',
open: true,
items: [
{
- name: 'parent node 11 - folded',
+ title: 'parent node 11 - folded',
items: [
{
- name: 'leaf node 111'
+ title: 'leaf node 111'
},
{
- name: 'leaf node 112'
+ title: 'leaf node 112'
},
{
- name: 'leaf node 113'
+ title: 'leaf node 113'
},
{
- name: 'leaf node 114'
+ title: 'leaf node 114'
}
]
},
{
- name: 'parent node 12 - folded',
+ title: 'parent node 12 - folded',
items: [
{
- name: 'leaf node 121'
+ title: 'leaf node 121'
},
{
- name: 'leaf node 122'
+ title: 'leaf node 122'
},
{
- name: 'leaf node 123'
+ title: 'leaf node 123'
},
{
- name: 'leaf node 124'
+ title: 'leaf node 124'
}
]
},
{
- name: 'parent node 13 - without children',
+ title: 'parent node 13 - without children',
isparent: true
}
]
},
{
- name: 'parent node 2 - folded',
+ title: 'parent node 2 - folded',
items: [
{
- name: 'parent node 21 - expanded',
+ title: 'parent node 21 - expanded',
open: true,
items: [
{
- name: 'leaf node 211'
+ title: 'leaf node 211'
},
{
- name: 'leaf node 212'
+ title: 'leaf node 212'
},
{
- name: 'leaf node 213'
+ title: 'leaf node 213'
},
{
- name: 'leaf node 214'
+ title: 'leaf node 214'
}
]
},
{
- name: 'parent node 22 - folded',
+ title: 'parent node 22 - folded',
items: [
{
- name: 'leaf node 221'
+ title: 'leaf node 221'
},
{
- name: 'leaf node 222'
+ title: 'leaf node 222'
},
{
- name: 'leaf node 223'
+ title: 'leaf node 223'
},
{
- name: 'leaf node 224'
+ title: 'leaf node 224'
}
]
},
{
- name: 'parent node 23 - folded',
+ title: 'parent node 23 - folded',
items: [
{
- name: 'leaf node 231'
+ title: 'leaf node 231'
},
{
- name: 'leaf node 232'
+ title: 'leaf node 232'
},
{
- name: 'leaf node 233'
+ title: 'leaf node 233'
},
{
- name: 'leaf node 234'
+ title: 'leaf node 234'
}
]
}
@@ -109,16 +109,11 @@ export const source = [
templateUrl: './check-control.component.html'
})
export class CheckControlComponent implements OnInit {
- data1 = Object.assign(source, []);
- data2 = Object.assign(source, []);
- data3 = Object.assign(source, []);
- data4 = Object.assign(source, []);
- data5 = source.map(item => {
- if (item.items && item.items.length) {
- item['showCheckbox'] = false;
- }
- return item;
- });
+ data1 = [...source];
+ data2 = [...source];
+ data3 = [...source];
+ data4 = [...source];
+ data5 = JSON.parse(JSON.stringify(source)).map(item => { item['showCheckbox'] = false; return item; });
constructor() { }
ngOnInit() {
diff --git a/devui/tree/demo/checkable/checkable.component.html b/devui/tree/demo/checkable/checkable.component.html
deleted file mode 100755
index a8a52753..00000000
--- a/devui/tree/demo/checkable/checkable.component.html
+++ /dev/null
@@ -1,22 +0,0 @@
-Operable Tree
-
-
-Clear All
-All Checked Notes:{{ checkNote | json }}
diff --git a/devui/tree/demo/checkable/checkable.component.ts b/devui/tree/demo/checkable/checkable.component.ts
deleted file mode 100755
index 7e9e3630..00000000
--- a/devui/tree/demo/checkable/checkable.component.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { ITreeItem, OperableTreeComponent, TreeNode } from 'ng-devui/tree';
-
-@Component({
- selector: 'd-checkable',
- templateUrl: './checkable.component.html',
-})
-export class CheckableComponent implements OnInit {
-
- @ViewChild('operableTree1', { static: true }) operableTreeComponent: OperableTreeComponent;
- currentSelectedNode;
- checkNote;
-
- // checkboxInput: ICheckboxInput = { color: '#5170ff' };
- data3 = [{
- 'title': 'parent node 1'
- }, {
- 'title': 'parent node 2',
- 'open': true,
- 'children': [{
- 'title': 'leaf node 2-1',
- 'children': [{
- 'title': 'leaf node 2-1-1'
- }, {
- 'title': 'leaf node 2-1-2'
- }]
- }, {
- 'title': 'leaf node 2-2',
- 'open': true,
- 'children': [{
- 'title': 'leaf node 2-2-1',
- 'disabled': true,
- 'isChecked': true
- }, {
- 'title': 'leaf node 2-2-2',
- 'disableSelect': true
- }]
- }]
- }, {
- 'title': 'parent node 3',
- 'disableToggle': true,
- 'children': [{
- 'title': 'leaf node 3-1',
- }, {
- 'title': 'leaf node 3-2',
- }],
- }, {
- 'title': 'parent node 4',
- 'children': [{
- 'title': 'leaf node 4-1'
- }, {
- 'title': 'leaf node 4-2'
- }]
- }, {
- 'title': 'parent node 5',
- 'children': [{
- 'title': 'leaf node 5-1'
- }, {
- 'title': 'leaf node 5-2'
- }]
- }];
-
- ngOnInit() {
- setTimeout(() => this.getCheckedNote(this.operableTreeComponent), 0);
- }
-
- onOperableNodeDeleted(treeNode: TreeNode) {
- console.log('deleted: ', treeNode);
- }
-
- onOperableNodeSelected(treeNode: TreeNode) {
- console.log('selected: ', treeNode);
- this.currentSelectedNode = treeNode;
- }
-
- onOperableNodeToggled(treeNode: TreeNode) {
- console.log('toggled: ', treeNode);
- }
-
- onOperableNodeChecked(checkedNodes: Array) {
- this.getCheckedNote(this.operableTreeComponent);
- console.log('checked: ', checkedNodes);
- }
-
- getCheckedNote(tree: OperableTreeComponent) {
- if (!tree || !tree.treeFactory) {
- this.checkNote = [];
- return;
- }
- this.checkNote = tree.treeFactory.getCheckedNodes()
- .map((item: any) => ({ id: item.id, data: { title: item.data.title, isChecked: item.data.isChecked } }));
- }
-
- onOperableNodeDblClicked(node) {
- console.log(node);
- }
-
- onOperableNodeRightClicked(event) {
- console.log(event.node, event.event);
- }
- currentNodeChecked($event) {
- console.log('current node', $event);
- }
- clearCheckedNodes() {
- this.operableTreeComponent.treeFactory.checkAllNodes(false);
- this.getCheckedNote(this.operableTreeComponent);
- }
-}
diff --git a/devui/tree/demo/custom-key/custom-key.component.html b/devui/tree/demo/custom-key/custom-key.component.html
new file mode 100644
index 00000000..981feb18
--- /dev/null
+++ b/devui/tree/demo/custom-key/custom-key.component.html
@@ -0,0 +1,13 @@
+Operable Tree
+
+
diff --git a/devui/tree/demo/custom-key/custom-key.component.ts b/devui/tree/demo/custom-key/custom-key.component.ts
new file mode 100644
index 00000000..df7b3fd7
--- /dev/null
+++ b/devui/tree/demo/custom-key/custom-key.component.ts
@@ -0,0 +1,61 @@
+import { Component, ViewChild } from '@angular/core';
+import { OperableTreeComponent } from 'ng-devui/tree';
+
+@Component({
+ selector: 'd-custom-key',
+ templateUrl: './custom-key.component.html',
+})
+export class CustomKeyComponent {
+
+ @ViewChild('operableTree1', { static: true }) operableTreeComponent: OperableTreeComponent;
+ currentSelectedNode;
+ checkedNodes;
+ data3 = [{
+ 'name': 'parent node 1'
+ }, {
+ 'name': 'parent node 2',
+ 'open': true,
+ 'children': [{
+ 'name': 'leaf node 2-1',
+ 'children': [{
+ 'name': 'leaf node 2-1-1'
+ }, {
+ 'name': 'leaf node 2-1-2'
+ }]
+ }, {
+ 'name': 'leaf node 2-2',
+ 'open': true,
+ 'children': [{
+ 'name': 'leaf node 2-2-1',
+ 'disabled': true,
+ 'isChecked': true
+ }, {
+ 'name': 'leaf node 2-2-2',
+ 'disableSelect': true,
+ 'disableCheckbox':true
+ }]
+ }]
+ }, {
+ 'name': 'parent node 3',
+ 'disableToggle': true,
+ 'children': [{
+ 'name': 'leaf node 3-1',
+ }, {
+ 'name': 'leaf node 3-2',
+ }],
+ }, {
+ 'name': 'parent node 4',
+ 'children': [{
+ 'name': 'leaf node 4-1'
+ }, {
+ 'name': 'leaf node 4-2'
+ }]
+ }, {
+ 'name': 'parent node 5',
+ 'children': [{
+ 'name': 'leaf node 5-1'
+ }, {
+ 'name': 'leaf node 5-2'
+ }]
+ }];
+}
diff --git a/devui/tree/demo/custom-loading/custom-loading.component.html b/devui/tree/demo/custom-loading/custom-loading.component.html
index cc28b0ce..15bfcf40 100644
--- a/devui/tree/demo/custom-loading/custom-loading.component.html
+++ b/devui/tree/demo/custom-loading/custom-loading.component.html
@@ -1,11 +1,12 @@
+
+ Change Loading Template
diff --git a/devui/tree/demo/custom-loading/custom-loading.component.ts b/devui/tree/demo/custom-loading/custom-loading.component.ts
index 16342a51..7be372bd 100644
--- a/devui/tree/demo/custom-loading/custom-loading.component.ts
+++ b/devui/tree/demo/custom-loading/custom-loading.component.ts
@@ -1,6 +1,121 @@
import { Component, ViewChild } from '@angular/core';
import { ITreeItem, TreeComponent, TreeNode } from 'ng-devui/tree';
import { customLoadingSvg } from './custom-loading-svg';
+
+export const originTreeData = [
+ {
+ title: 'parent node 1',
+ open: true,
+ disabled: true,
+ items: [
+ {
+ title: 'parent node 11',
+ items: [
+ {
+ title: 'leaf node 111'
+ },
+ {
+ title: 'leaf node 112'
+ },
+ {
+ title: 'leaf node 113'
+ },
+ {
+ title: 'leaf node 114'
+ }
+ ]
+ },
+ {
+ title: 'parent node 12',
+ disableToggle: true,
+ items: [
+ {
+ title: 'leaf node 121'
+ },
+ {
+ title: 'leaf node 122'
+ },
+ {
+ title: 'leaf node 123'
+ },
+ {
+ title: 'leaf node 124'
+ }
+ ]
+ },
+ {
+ title: 'parent node 13 - without children - dynamic loading',
+ isParent: true
+ }
+ ]
+ },
+ {
+ title: 'parent node 2',
+ items: [
+ {
+ title: 'parent node 21',
+ open: true,
+ items: [
+ {
+ title: 'leaf node 211'
+ },
+ {
+ title: 'leaf node 212'
+ },
+ {
+ title: 'leaf node 213'
+ },
+ {
+ title: 'leaf node 214'
+ }
+ ]
+ },
+ {
+ title: 'parent node 22',
+ items: [
+ {
+ title: 'leaf node 221'
+ },
+ {
+ title: 'leaf node 222'
+ },
+ {
+ title: 'leaf node 223'
+ },
+ {
+ title: 'leaf node 224'
+ }
+ ]
+ },
+ {
+ title: 'parent node 23',
+ items: [
+ {
+ title: 'leaf node 231'
+ },
+ {
+ title: 'leaf node 232'
+ },
+ {
+ title: 'leaf node 233'
+ },
+ {
+ title: 'leaf node 234'
+ }
+ ]
+ }
+ ]
+ },
+ {
+ id: 'dynamicNode',
+ title: 'parent node 3 - without children - dynamic loading',
+ isParent: true,
+ data: {
+ id: 'newChildNode',
+ name: 'new child node'
+ }
+ }
+];
@Component({
selector: 'd-custom-loading',
templateUrl: './custom-loading.component.html'
@@ -12,131 +127,21 @@ export class CustomLoadingComponent {
left: '30px'
};
customLoadingSvg = customLoadingSvg;
- data1 = [
- {
- title: 'parent node 1 - expanded',
- open: true,
- disabled: true,
- items: [
- {
- title: 'parent node 11 - folded',
- items: [
- {
- title: 'leaf node 111'
- },
- {
- title: 'leaf node 112'
- },
- {
- title: 'leaf node 113'
- },
- {
- title: 'leaf node 114'
- }
- ]
- },
- {
- title: 'parent node 12 - folded',
- disableToggle: true,
- items: [
- {
- title: 'leaf node 121'
- },
- {
- title: 'leaf node 122'
- },
- {
- title: 'leaf node 123'
- },
- {
- title: 'leaf node 124'
- }
- ]
- },
- {
- title: 'parent node 13 - without children - dynamic loading',
- isParent: true
- }
- ]
- },
- {
- title: 'parent node 2 - folded',
- items: [
- {
- title: 'parent node 21 - expanded',
- open: true,
- items: [
- {
- title: 'leaf node 211'
- },
- {
- title: 'leaf node 212'
- },
- {
- title: 'leaf node 213'
- },
- {
- title: 'leaf node 214'
- }
- ]
- },
- {
- title: 'parent node 22 - folded',
- items: [
- {
- title: 'leaf node 221'
- },
- {
- title: 'leaf node 222'
- },
- {
- title: 'leaf node 223'
- },
- {
- title: 'leaf node 224'
- }
- ]
- },
- {
- title: 'parent node 23 - folded',
- items: [
- {
- title: 'leaf node 231'
- },
- {
- title: 'leaf node 232'
- },
- {
- title: 'leaf node 233'
- },
- {
- title: 'leaf node 234'
- }
- ]
- }
- ]
- },
- {
- id: 'dynamicNode',
- title: 'parent node 3 - without children - dynamic loading',
- isParent: true,
- data: {
- id: 'newChildNode',
- name: 'new child node'
- }
- }
- ];
-
- onNodeSelected(treeNode: TreeNode) {
- console.log('selected: ', treeNode);
- }
+ data = originTreeData;
+ isCustomLoadingTmpl = false;
onNodeToggled(treeNode: TreeNode) {
+ console.log('toggled ', treeNode);
this.loadChildren(treeNode);
}
+ changeLoadingTemplate() {
+ this.isCustomLoadingTmpl = !this.isCustomLoadingTmpl;
+ this.data = [...originTreeData];
+ }
+
changeTree() {
- this.data1 = [{
+ this.data = [{
id: 'dynamicNode2',
title: 'parent node 4 - dynamic loading',
isParent: true,
diff --git a/devui/tree/demo/custom-title-key/custom-title-key.component.html b/devui/tree/demo/custom-title-key/custom-title-key.component.html
deleted file mode 100644
index 232c8d78..00000000
--- a/devui/tree/demo/custom-title-key/custom-title-key.component.html
+++ /dev/null
@@ -1,11 +0,0 @@
-Basic Tree
-
-
diff --git a/devui/tree/demo/custom-title-key/custom-title-key.component.ts b/devui/tree/demo/custom-title-key/custom-title-key.component.ts
deleted file mode 100644
index 0660d43a..00000000
--- a/devui/tree/demo/custom-title-key/custom-title-key.component.ts
+++ /dev/null
@@ -1,156 +0,0 @@
-import { Component } from '@angular/core';
-import { ITreeItem } from 'ng-devui/tree';
-@Component({
- selector: 'd-custom-title-key',
- templateUrl: './custom-title-key.component.html'
-})
-export class CustomTitleKeyComponent {
- data1: ITreeItem[] = [
- {
- id: '1',
- name: 'parent node 1 - expanded',
- open: true,
- children: [
- {
- id: '2',
- name: 'parent node 11 - folded',
- checkboxDisabled: true,
- children: [
- {
- id: '3',
- name: 'leaf node 111'
- },
- {
- id: '4',
- name: 'leaf node 112'
- },
- {
- id: '5',
- name: 'leaf node 113'
- },
- {
- id: '6',
- name: 'leaf node 114'
- }
- ]
- },
- {
- id: '7',
- name: 'parent node 12 - folded',
- children: [
- {
- id: '8',
- name: 'leaf node 121'
- },
- {
- id: '9',
- name: 'leaf node 122'
- },
- {
- id: '10',
- name: 'leaf node 123'
- },
- {
- id: '11',
- name: 'leaf node 124'
- }
- ]
- },
- {
- id: '12',
- name: 'parent node 13 - without children',
- isParent: true
- }
- ]
- },
- {
- id: '13',
- name: 'parent node 2 - folded',
- children: [
- {
- id: '14',
- name: 'parent node 21 - expanded',
- open: true,
- children: [
- {
- id: '15',
- name: 'leaf node 211'
- },
- {
- id: '16',
- name: 'leaf node 212'
- },
- {
- id: '17',
- name: 'leaf node 213'
- },
- {
- id: '18',
- name: 'leaf node 214'
- }
- ]
- },
- {
- id: '19',
- name: 'parent node 22 - folded',
- children: [
- {
- id: '20',
- name: 'leaf node 221'
- },
- {
- id: '21',
- name: 'leaf node 222'
- },
- {
- id: '22',
- name: 'leaf node 223'
- },
- {
- id: '23',
- name: 'leaf node 224'
- }
- ]
- },
- {
- id: '24',
- name: 'parent node 23 - folded',
- children: [
- {
- id: '25',
- name: 'leaf node 231'
- },
- {
- id: '26',
- name: 'leaf node 232'
- },
- {
- id: '27',
- name: 'leaf node 233'
- },
- {
- id: '28',
- name: 'leaf node 234'
- }
- ]
- }
- ]
- },
- {
- id: '29',
- name: 'parent node 3 - without children',
- isParent: true,
- data: {
- id: '30',
- name: '456'
- }
- }
- ];
- onOperableNodeDblClicked(node) {
- console.log(node);
- }
-
- onOperableNodeRightClicked(event) {
- console.log(event.node, event.event);
- }
-}
diff --git a/devui/tree/demo/customize/customize.component.html b/devui/tree/demo/customize/customize.component.html
index e86209ef..4e6056f7 100755
--- a/devui/tree/demo/customize/customize.component.html
+++ b/devui/tree/demo/customize/customize.component.html
@@ -7,9 +7,6 @@ Status
Default
+Default
-Sortable
+Sortable
diff --git a/devui/tree/demo/draggable/draggable.component.ts b/devui/tree/demo/draggable/draggable.component.ts
index 38396592..34db9e80 100755
--- a/devui/tree/demo/draggable/draggable.component.ts
+++ b/devui/tree/demo/draggable/draggable.component.ts
@@ -13,17 +13,17 @@ export class DraggableComponent implements OnInit {
}, {
'title': 'parent node 2',
'open': true,
- 'children': [{
+ 'items': [{
'title': 'leaf node 2-1',
'open': true,
- 'children': [{
+ 'items': [{
'title': 'leaf node 2-1-1'
}, {
'title': 'leaf node 2-1-2'
}]
}, {
'title': 'leaf node 2-2',
- 'children': [{
+ 'items': [{
'title': 'leaf node 2-2-1'
}, {
'title': 'leaf node 2-2-2'
@@ -32,7 +32,7 @@ export class DraggableComponent implements OnInit {
}, {
'title': 'parent node 3',
'open': true,
- 'children': [{
+ 'items': [{
'title': 'leaf node 3-1',
}, {
'title': 'leaf node 3-2',
@@ -40,7 +40,7 @@ export class DraggableComponent implements OnInit {
}, {
'title': 'parent node 4',
'open': true,
- 'children': [{
+ 'items': [{
'title': 'leaf node 4-1'
}, {
'title': 'leaf node 4-2'
@@ -48,7 +48,7 @@ export class DraggableComponent implements OnInit {
}, {
'title': 'parent node 5',
'open': true,
- 'children': [{
+ 'items': [{
'title': 'leaf node 5-1'
}, {
'title': 'leaf node 5-2'
@@ -75,11 +75,15 @@ export class DraggableComponent implements OnInit {
};
onDrop(data) {
+ console.log('drop', data);
this.transferData = data.event.dataTransfer.getData('Text');
}
+ dragStart(event) {
+ console.log('dragStart', event);
+ }
showNode(node) {
- console.log(node);
+ console.log('toggle', node);
}
dragOver($event) {
$event.preventDefault();
diff --git a/devui/tree/demo/merge-node/merge-node.component.html b/devui/tree/demo/merge-node/merge-node.component.html
index 274b4a76..0b600b08 100644
--- a/devui/tree/demo/merge-node/merge-node.component.html
+++ b/devui/tree/demo/merge-node/merge-node.component.html
@@ -1 +1 @@
-
+
diff --git a/devui/tree/demo/merge-node/merge-node.component.ts b/devui/tree/demo/merge-node/merge-node.component.ts
index e7e43158..821d6dff 100644
--- a/devui/tree/demo/merge-node/merge-node.component.ts
+++ b/devui/tree/demo/merge-node/merge-node.component.ts
@@ -1,5 +1,5 @@
import { AfterViewInit, Component, ViewChild } from '@angular/core';
-import { TreeComponent, TreeNode } from 'ng-devui/tree';
+import { TreeComponent } from 'ng-devui/tree';
@Component({
selector: 'd-merge-node',
@@ -92,13 +92,4 @@ export class MergeNodeComponent implements AfterViewInit {
this.basicTree.treeFactory.mergeTreeNodes();
});
}
-
- onNodeSelected(treeNode: TreeNode) {
- console.log('selected: ', treeNode);
- }
-
- onNodeToggled(treeNode: TreeNode) {
- console.log(treeNode);
- }
-
}
diff --git a/devui/tree/demo/operate-btn/operate-btn.component.html b/devui/tree/demo/operate-btn/operate-btn.component.html
index f9e1fb2e..9700ef24 100755
--- a/devui/tree/demo/operate-btn/operate-btn.component.html
+++ b/devui/tree/demo/operate-btn/operate-btn.component.html
@@ -1,14 +1,6 @@
diff --git a/devui/tree/demo/operate-btn/operate-btn.component.ts b/devui/tree/demo/operate-btn/operate-btn.component.ts
index 486c06bf..d28cfeb4 100755
--- a/devui/tree/demo/operate-btn/operate-btn.component.ts
+++ b/devui/tree/demo/operate-btn/operate-btn.component.ts
@@ -9,19 +9,20 @@ export class OperateBtnComponent {
currentSelectedNode;
@ViewChild('operableTree', { static: true }) operableTree: OperableTreeComponent;
data = [{
- 'title': 'parent node 1'
+ 'title': 'parent node 1',
+ 'disableAdd':true
}, {
'title': 'parent node 2',
- 'children': [{
+ 'items': [{
'title': 'leaf node 2-1',
- 'children': [{
+ 'items': [{
'title': 'leaf node 2-1-1'
}, {
'title': 'leaf node 2-1-2'
}]
}, {
'title': 'leaf node 2-2',
- 'children': [{
+ 'items': [{
'title': 'leaf node 2-2-1'
}, {
'title': 'leaf node 2-2-2'
@@ -29,21 +30,21 @@ export class OperateBtnComponent {
}]
}, {
'title': 'parent node 3',
- 'children': [{
+ 'items': [{
'title': 'leaf node 3-1',
}, {
'title': 'leaf node 3-2',
}],
}, {
'title': 'parent node 4',
- 'children': [{
+ 'items': [{
'title': 'leaf node 4-1'
}, {
'title': 'leaf node 4-2'
}]
}, {
'title': 'parent node 5',
- 'children': [{
+ 'items': [{
'title': 'leaf node 5-1'
}, {
'title': 'leaf node 5-2'
diff --git a/devui/tree/demo/search-filter/search-filter.component.html b/devui/tree/demo/search-filter/search-filter.component.html
index ee1ba6f4..abe1dfc9 100644
--- a/devui/tree/demo/search-filter/search-filter.component.html
+++ b/devui/tree/demo/search-filter/search-filter.component.html
@@ -27,12 +27,4 @@ Operable Tree With Search
diff --git a/devui/tree/demo/search-filter/search-filter.component.ts b/devui/tree/demo/search-filter/search-filter.component.ts
index 661b4ea9..a2e6f767 100644
--- a/devui/tree/demo/search-filter/search-filter.component.ts
+++ b/devui/tree/demo/search-filter/search-filter.component.ts
@@ -1,5 +1,5 @@
import { Component, ViewChild } from '@angular/core';
-import { OperableTreeComponent, TreeNode } from 'ng-devui/tree';
+import { OperableTreeComponent } from 'ng-devui/tree';
@Component({
selector: 'd-search-filter',
templateUrl: './search-filter.component.html',
@@ -7,17 +7,16 @@ import { OperableTreeComponent, TreeNode } from 'ng-devui/tree';
})
export class SearchFilterComponent {
@ViewChild('dOperableTreeComponent', { static: true }) dOperableTreeComponent: OperableTreeComponent;
- currentSelectedNode;
data2 = [{
'title': 'parent node 1',
'customSearchValue': 'a',
}, {
'title': 'parent node 2',
'customSearchValue': 'b',
- 'children': [{
+ 'items': [{
'title': 'child node 2-1',
'customSearchValue': 'c',
- 'children': [{
+ 'items': [{
'title': 'child node 2-1-1',
'customSearchValue': 'd',
}, {
@@ -27,7 +26,7 @@ export class SearchFilterComponent {
}, {
'title': 'child node 2-2',
'customSearchValue': 'f',
- 'children': [{
+ 'items': [{
'title': 'child node 2-2-1',
'customSearchValue': 'g',
}, {
@@ -38,7 +37,7 @@ export class SearchFilterComponent {
}, {
'title': 'parent node 3',
'customSearchValue': 'i',
- 'children': [{
+ 'items': [{
'title': 'child node 3-1',
'customSearchValue': 'j',
}, {
@@ -48,7 +47,7 @@ export class SearchFilterComponent {
}, {
'title': 'parent node 4',
'customSearchValue': 'l',
- 'children': [{
+ 'items': [{
'title': 'child node 4-1',
'customSearchValue': 'm',
}, {
@@ -58,7 +57,7 @@ export class SearchFilterComponent {
}, {
'title': 'parent node 5',
'customSearchValue': 'o',
- 'children': [{
+ 'items': [{
'title': 'child node 5-1',
'customSearchValue': 'p',
}, {
@@ -67,15 +66,6 @@ export class SearchFilterComponent {
}]
}];
- onOperableNodeDeleted(treeNode: TreeNode) {
- console.log('deleted: ', treeNode);
- }
-
- onOperableNodeSelected(treeNode: TreeNode) {
- console.log('selected: ', treeNode);
- this.currentSelectedNode = treeNode;
- }
-
onKeyUp(event) {
this.dOperableTreeComponent.operableTree.treeFactory.searchTree(event);
}
diff --git a/devui/tree/demo/tree-demo.component.html b/devui/tree/demo/tree-demo.component.html
index f95de94f..aba4787c 100755
--- a/devui/tree/demo/tree-demo.component.html
+++ b/devui/tree/demo/tree-demo.component.html
@@ -20,18 +20,19 @@