下在好dtree.js 、dtree.css以及自己想要的圖片放好在工程里面
打開dtree.js
找到這里，可以看到這里改圖片路徑，看你自己想怎么顯示了
this.icon = 
{
root : 'images/ico/root_main.gif',
folder : 'images/ico/folder_closed.gif',
folderOpen : 'images/ico/folder_open.gif',
node : 'images/ico/page.gif',
empty : 'images/ico/space.gif',
line : 'images/ico/line.gif',
join : 'images/ico/line_notlast.gif',
joinBottom : 'images/ico/line_last.gif',
plus : 'images/ico/plus_notlast.gif',
plusBottom : 'images/ico/plus_last.gif',
minus : 'images/ico/minus_notlast.gif',
minusBottom : 'images/ico/minus_last.gif',
nlPlus : 'images/ico/nolines_plus.gif',
nlMinus : 'images/ico/nolines_minus.gif'
};
然后建好數據表
我的表如下圖：
id :節點
pid：父節點
name：名稱
url：地址
然后要做的就是在action里面得到這個表的所有信息并以list傳出，這里就不再介紹
jsp頁面
<html>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<%@ taglib uri="/WEB-INF/tld/struts-bean.tld" prefix="bean"%>
<%@ taglib uri="/WEB-INF/tld/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/tld/struts-logic.tld" prefix="logic"%>
<%
String root = request.getContextPath();
%>
<head>
<title>TREE</title>
<link href="css/dtree.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/dtree.js"></script>
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
}
-->
</style>
</head>
<body>
<div class="dtree">
<script type="text/javascript">
d = new dTree('d');
<logic:iterate id="list" name="list">
d.add(<bean:write name="list" property="id"/>,<bean:write name="list" property="pid"/>,'<bean:write name="list" property="name"/>','<bean:write name="list" property="url"/>','','','','');
</logic:iterate>
document.write(d);
d.closeAll();
d.openTo(4,false);
</script>
</div>
</body>
</html>
下面解釋下 d.add(9個參數) 這個方法
第一個參數，表示當前節點的ID
第二個參數，表示當前節點的父節點的ID,根節點的值為 -1
第三個參數，節點要顯示的文字
第四個參數，節點的Url
第五個參數，鼠標移至該節點時節點的Title
第六個參數，節點的target
第七個參數，用做節點的圖標,節點沒有指定圖標時使用默認值
第八個參數，用做節點打開的圖標,節點沒有指定圖標時使用默認值
第九個參數，判斷節點是否打開
詳細的大家去看api
運行后就可以得到樹了
大家看數據庫就知道
a101、a102的父節點是a1
b1001的父節點是a101
b1002的父節點是 a102
完成了，很簡單吧
posted on 2008-09-11 17:14
老丁 閱讀(1504)
評論(0) 編輯 收藏 所屬分類:
js相關