dtree的使用

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

第二步：导入相关包

<link rel="StyleSheet" href="${ctx}/dtree/dtree.css" type="text/css" />
<script type="text/javascript" src="${ctx}/dtree/dtree.js"></script>

第二步：利用js输出

<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(6,5,'Node 1.1.1.1','http://www.baidu.com');
		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打印出来

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 里的方法

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层