dTree.js和dTree.css下载地址:http://www.destroydrop.com/javascripts/tree/
对于小型的树型应用来说,dtree是一个不错的选择。
-
先看一眼dtree给的例子
-
构造静态树
首先引入css文件和js文件
1
2
|
<link rel=
"StyleSheet"
href=
"dtree.css"
type=
"text/css"
/>
<script type=
"text/javascript"
src=
"dtree.js"
></script>
|
构造静态树其实很简单
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
|
<div
class
=
"cnblogs_Highlighter"
><pre
class
=
"brush:javascript"
><script>
/*
tree.add(id,pid,name,url,title,target,icon,iconOpen,open);
id :节点自身的id
pid :节点的父节点的id
name :节点显示在页面上的名称
url :节点的链接地址
title :鼠标放在节点上所出现的提示信息
target :节点链接所打开的目标frame(如框架目标mainFrame或是_blank,_self之类)
icon :节点关闭时的显示图片的路径
iconOpen :节点打开时的显示图片的路径
open :布尔型,节点是否打开(默认为false)
------------------------------------------------
东城区、西城区、崇文区、宣武区、朝阳区、丰台区、石景山区、
海淀区、门头沟区、房山区、通州区、顺义区、 昌平区、
大兴区、怀柔区、平谷区 、 密云县、延庆县
------------------------------------------------
*/
</script>
<script type=
"text/javascript"
>
tree =
new
dTree(
'tree'
);
//创建一个对象.
tree.add(
"1"
,
"-1"
,
"中国"
,
""
,
""
,
""
,
""
,
""
,
false
);
tree.add(
"11"
,
"1"
,
"北京"
,
""
,
""
,
""
,
""
,
""
,
false
);
tree.add(
"110"
,
"11"
,
"东城区"
,
"连接地址可以从数据库里面动态查询出来.."
,
"东城区"
,
"打开目标位置"
);
tree.add(
"111"
,
"11"
,
"西城区"
,
"连接地址可以从数据库里面动态查询出来.."
,
""
,
"链接在哪里显示"
);
tree.add(
"112"
,
"11"
,
"崇文区"
,
"连接地址可以从数据库里面动态查询出来.."
,
""
,
"mainFrame"
);
tree.add(
"113"
,
"11"
,
"宣武区"
,
""
,
""
,
"_blank"
);
tree.add(
"114"
,
"11"
,
"朝阳区"
,
"/.jsp"
,
""
,
"mainFrame"
);
tree.add(
"115"
,
"11"
,
"丰台区"
,
"/.jsp"
,
""
,
"mainFrame"
);
tree.add(
"116"
,
"11"
,
"石景山区"
,
"/.jsp"
,
""
,
"mainFrame"
);
tree.add(
"117"
,
"11"
,
"海淀区"
,
"/.jsp"
,
""
,
"mainFra
|