|
1 |
|
第一步：到官网下载下载dtree的相关包。
第二步：导入相关包
|
1
2 |
<link rel="StyleSheet"
href="${ctx}/dtree/dtree.css"
type="text/css"
/><script type="text/javascript"
src="${ctx}/dtree/dtree.js"></script> |
第二步：利用js输出
|
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 |
<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p> <script type="text/javascript"> <!-- d = new
dTree(‘d‘); d.add(0,-1,‘My example tree‘); d.add(1,0,‘Node 1‘,‘example01.html‘); d.add(2,0,‘Node 2‘,‘example01.html‘); d.add(3,1,‘Node 1.1‘,‘example01.html‘); d.add(4,0,‘Node 3‘,‘example01.html‘); d.add(5,3,‘Node 1.1.1‘,‘example01.html‘); d.add(7,0,‘Node 4‘,‘example01.html‘); d.add(8,1,‘Node 1.2‘,‘example01.html‘); d.add(9,0,‘My Pictures‘,‘example01.html‘,‘Pictures I\‘ve taken over the years‘,‘‘,‘‘,‘dtree/img/imgfolder.gif‘); d.add(10,9,‘The trip to Iceland‘,‘example01.html‘,‘Pictures of Gullfoss and Geysir‘); d.add(11,9,‘Mom\‘s birthday‘,‘example01.html‘); d.add(12,0,‘Recycle Bin‘,‘example01.html‘,‘‘,‘‘,‘dtree/img/trash.gif‘); document.write(d); //--> </script> |
输了样式为：
该图为静态的。
二、动态输出树
1.使用jquery ajax方式从后台得到树列表，并转化成json数据，并使用js打印出来
|
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 |
function
loaddata() { $.ajax({ type: "get",//使用get方法访问后台 dataType: "json",//返回json格式的数据 url: "${ctx}/user/UserAction.do",//要访问的后台地址 data: "method=get_myitem&actor.aid=${userforms.actor.aid}",//要发送的数据 success: function(itemlist){//msg为返回的数据，在这里做数据绑定 d = new
dTree(‘d‘); d.add(0,-1,‘首页‘,‘javascript:void(0);‘); for(var
i=0;i<itemlist.length;i++) { var
item = itemlist[i]; if(item.root==0) { d.add(item.iid,item.root,item.name,item.url); for(var
j=0;j<itemlist.length;j++) { var
item1 = itemlist[j]; if(item1.root==item.iid) { d.add(item1.iid,item1.root,item1.name,item1.url); } } } } d.add(100,0,‘系统帮助‘,‘javascript:void(0);‘); d.add(101,100,‘使用手册‘,‘#‘); d.add(102,100,‘规章制度‘,‘#‘); //$("#dtree").html(d); document.getElementById("dtree").innerHTML=d; } }); } |
后台：useraction 里的方法
|
1
2
3
4
5
6
7
8 |
List<Item> itemlist = userservice.query_item_list(userform.actor.getAid()); //将itemlist转化成json数据发送到前台 JSONArray jsonArray = JSONArray.fromObject(itemlist); PrintWriter out = response.getWriter(); out.write(jsonArray.toString()); out.flush(); out.close(); |
效果图：
这里有一个注意问题：jquery与dtree不兼容
原因：
$("#dtree").html(d);
\\显示不了，打印不出来
document.getElementById("dtree").innerHTML=d; \\正常显示
说明：d.add(item1.iid,item1.root,item1.name,item1.url);
第一个参数：自身id序列 第二个参数：所属父节点id(-1为整棵树的根，最上面的节点) 第三个参数：节点名字 第四个参数：url 第五个参数：图标
以栏‘目管理为例’：
第一个参数：iid 第二个参数：0（首页的id） 第三个参数：‘栏目管理’ 第四个参数：‘www.baidu.com’ 第五个参数：‘\img\test.gif’
该树可以为n层
原文：http://www.cnblogs.com/liuyq/p/3653048.html