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的圖片最好單獨存放，而不要放入項目的圖片文件夾，否則有可能會導致節點錯位