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>

　　输了样式为：

dtree的使用该图为静态的。

二、动态输出树

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();

效果图：

dtree的使用这里有一个注意问题：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层

相关文章