大家好，欢迎来到IT知识分享网。
第一步：到官网下载下载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层
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/11608.html
