论坛上有同学提出如何在tree上画引导线，之前我们Flex已经实现此功能，现在最新版的HTML5也将添加此功能。先看看效果：
详细的使用方法可以参考我们开发手册中可视化视图组件#Tree引导线一章，下面贴出一个Demo，没有图标，没有框选。仅供参考：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
TreeLineDemo
<script
src
=
"../twaver.js"
>
</script>
<script>
<
!
[
CDATA
[
var
box
=
new
twaver
.
ElementBox
(
)
;
var
tree
=
new
twaver
.
controls
.
Tree
(
box
)
;
function
init
(
)
{
initTreeView
(
)
;
initDataBox
(
)
;
}
function
initTreeView
(
)
{
var
treeDom
=
tree
.
getView
(
)
;
treeDom
.
style
.
width
=
"100%"
;
treeDom
.
style
.
height
=
"100%"
;
document
.
body
.
appendChild
(
treeDom
)
;
tree
.
setLineType
(
'solid'
)
;
//solid,dotted,none
tree
.
setLineColor
(
'#000000'
)
;
tree
.
setLineAlpha
(
1
)
;
tree
.
setLineThickness
(
2
)
;
}
function
initDataBox
(
)
{
var
group
=
new
twaver
.
Group
(
)
;
group
.
setName
(
'Group'
)
;
group
.
setIcon
(
null
)
;
box
.
add
(
group
)
;
for
(
var
i
=
0
;
i
<
2
;
i
++
)
{
var
node1
=
new
twaver
.
Node
(
{
name
:
'Node-'
+
i
,
location
:
{
x
:
100
,
y
:
200
}
,
}
)
;
node1
.
setIcon
(
null
)
;
node1
.
setParent
(
group
)
;
box
.
add
(
node1
)
;
for
(
var
j
=
0
;
j
<
2
;
j
++
)
{
var
node2
=
new
twaver
.
Node
(
)
;
node2
.
setName
(
'Node-'
+
i
+
'-'
+
j
)
;
node2
.
setParent
(
node1
)
;
node2
.
setIcon
(
null
)
;
box
.
add
(
node2
)
;
for
(
var
k
=
0
;
k
<
2
;
k
++
)
{
var
node3
=
new
twaver
.
Node
(
)
;
node3
.
setName
(
'Node-'
+
i
+
'-'
+
j
+
'-'
+
k
)
;
node3
.
setParent
(
node2
)
;
node3
.
setIcon
(
null
)
;
box
.
add
(
node3
)
;
for
(
var
m
=
0
;
m
<
4
;
m
++
)
{
var
node4
=
new
twaver
.
Node
(
)
;
node4
.
setName
(
'Node-'
+
i
+
'-'
+
j
+
'-'
+
'-'
+
k
+
'-'
+
m
)
;
node4
.
setParent
(
node3
)
;
node4
.
setIcon
(
null
)
;
box
.
add
(
node4
)
;
}
var
node
=
new
twaver
.
Node
(
{
name
:
'Node-'
+
(
i
+
1
)
+
'-'
+
(
j
+
1
)
+
'-'
+
(
k
+
1
)
}
)
;
node
.
setIcon
(
null
)
;
box
.
add
(
node
)
;
node
.
setParent
(
node2
)
;
}
var
node
=
new
twaver
.
Node
(
{
name
:
'Node-'
+
(
i
+
1
)
+
'-'
+
(
j
+
1
)
}
)
;
node
.
setIcon
(
null
)
;
box
.
add
(
node
)
;
node
.
setParent
(
node1
)
;
}
var
node
=
new
twaver
.
Node
(
{
name
:
'Node-'
+
(
i
+
1
)
}
)
;
node
.
setIcon
(
null
)
;
box
.
add
(
node
)
;
node
.
setParent
(
group
)
;
}
tree
.
expandAll
(
)
;
}
]
]
>
</script>
|
如有需要可邮箱联系：[email protected]