dtree+jstl的树型菜单

下面是dtree的下载地址

http://destroydrop.com/javascripts/tree/

 

首先看看dtree在静态页面中的效果

<div class="dtree">

	<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','example01.html');
		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','','','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','','','img/trash.gif');

		document.write(d);

		//-->
	</script>

</div>

 

以下是效果图

 

d.add()函数中，各参数的含义依次为，当前节点id，父节点id，节点文本内容，节点的url地址，节点标题，节点url地址的打开方式，节点图标，节点打开状态时的图标，节点开启状态。设置前4项参数基本就够用了。

 

那么dtree结合jstl如何使用，首先我们需要类似于d.add()方法中参数的数据库表，那么需要改动的仅仅是jsp页面的

一点点内容。

首先我们需要dtree的样式文件以及js脚本，其次是dtree的图片，以下是具体代码。

<div class="dtree">
<script type="text/javascript">
	d = new dTree('d');
	<c:forEach var="class" items="${tblBClasss}">
	d.add(${class.id},${class.parentid},"${class.classname}","${class.href}");
	</c:forEach>
	document.write(d);

</script>
</div>

当然这里我们也可以使用el表达式，同样可以达到效果。

以下是使用jstl例子的具体效果

   

     

 

这里注意的一点是，dtree的图片最好单独存放，而不要放入项目的图片文件夹，否则有可能会导致节点错位