下在好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
老丁 阅读(1493)
评论(0) 编辑 收藏 所属分类:
js相关