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層