下在好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'
};
然后建好數(shù)據(jù)表
我的表如下圖：
id :節(jié)點(diǎn)
pid：父節(jié)點(diǎn)
name：名稱
url：地址
然后要做的就是在action里面得到這個(gè)表的所有信息并以list傳出，這里就不再介紹
jsp頁(yè)面
<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個(gè)參數(shù)) 這個(gè)方法
第一個(gè)參數(shù)，表示當(dāng)前節(jié)點(diǎn)的ID
第二個(gè)參數(shù)，表示當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)的ID,根節(jié)點(diǎn)的值為 -1
第三個(gè)參數(shù)，節(jié)點(diǎn)要顯示的文字
第四個(gè)參數(shù)，節(jié)點(diǎn)的Url
第五個(gè)參數(shù)，鼠標(biāo)移至該節(jié)點(diǎn)時(shí)節(jié)點(diǎn)的Title
第六個(gè)參數(shù)，節(jié)點(diǎn)的target
第七個(gè)參數(shù)，用做節(jié)點(diǎn)的圖標(biāo),節(jié)點(diǎn)沒有指定圖標(biāo)時(shí)使用默認(rèn)值
第八個(gè)參數(shù)，用做節(jié)點(diǎn)打開的圖標(biāo),節(jié)點(diǎn)沒有指定圖標(biāo)時(shí)使用默認(rèn)值
第九個(gè)參數(shù)，判斷節(jié)點(diǎn)是否打開
詳細(xì)的大家去看api
運(yùn)行后就可以得到樹了
大家看數(shù)據(jù)庫(kù)就知道
a101、a102的父節(jié)點(diǎn)是a1
b1001的父節(jié)點(diǎn)是a101
b1002的父節(jié)點(diǎn)是 a102
完成了，很簡(jiǎn)單吧
posted on 2008-09-11 17:14
老丁 閱讀(1501)
評(píng)論(0) 編輯 收藏 所屬分類:
js相關(guān)