第一步：到官网下载下载dtree的相关包。

第二步：导入相关包

第二步：利用js输出

open all | close all

输了样式为：

该图为静态的。

二、动态输出树

1.使用jquery ajax方式从后台得到树列表，并转化成json数据，并使用js打印出来

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

{

var item = itemlist[i];

if(item.root==0)

{

d.add(item.iid,item.root,item.name,item.url);

for(var j=0;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 里的方法

List 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层