树形菜单DTree使用小记：
version:dTree 2.05
1、下载dTree2.05，这个不用我说了，大家都会，不会问Google
2、建立web项目
3、解压后复制dtree目录下的img文件夹和dtree.css和dtree.js文件到WebRoot目录下
4、建立index.jsp文件：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!-- 引入dtree相关文件 -->
[color=red]<link rel="StyleSheet" href="dtree/dtree.css" type="text/css" />
<script type="text/javascript" src="dtree/dtree.js"></script>[/color] </head>
<body>
This is DTree Test.
<br>
<div class="dtree">
<p>
<!-- dtree的方法 -->
[color=red]<a href="javascript: d.openAll();">展开全部</a> |
<a href="javascript: d.closeAll();">关闭全部</a>[/color] </p>
<!-- 添加相关节点，相关参数含义可以查看dtree的文档-->
[color=red]<script type="text/javascript">
d = new dTree('d');
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','/');
d.add(2,0,'Node 2','/');
d.add(3,1,'Node 1.1','/');
d.add(4,0,'Node 3','/');
d.add(5,3,'Node 1.1.1','/');
d.add(6,5,'Node 1.1.1.1','/');
d.add(7,0,'Node 4','/');
d.add(8,1,'Node 1.2','/');
d.add(9,0,'My Pictures','/','Pictures I\'ve taken over the
years','','','dtree/img/imgfolder.gif');
d.add(10,9,'The trip to Iceland','/','Pictures of Gullfoss and Geysir');
d.add(11,9,'Mom\'s birthday','/');
d.add(12,0,'Recycle Bin','/','','','dtree/img/trash.gif');
document.write(d);
</script>[/color] </div>
</body>
</html>
5、注意：如果图片不能显示，根据你建立的目录结构需要修改dtree.js中的this.icon属性中的相关图片链接路径
6、部署运行，效果已经出来了。
version:dTree 2.05
1、下载dTree2.05，这个不用我说了，大家都会，不会问Google
2、建立web项目
3、解压后复制dtree目录下的img文件夹和dtree.css和dtree.js文件到WebRoot目录下
4、建立index.jsp文件：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!-- 引入dtree相关文件 -->
[color=red]<link rel="StyleSheet" href="dtree/dtree.css" type="text/css" />
<script type="text/javascript" src="dtree/dtree.js"></script>[/color] </head>
<body>
This is DTree Test.
<br>
<div class="dtree">
<p>
<!-- dtree的方法 -->
[color=red]<a href="javascript: d.openAll();">展开全部</a> |
<a href="javascript: d.closeAll();">关闭全部</a>[/color] </p>
<!-- 添加相关节点，相关参数含义可以查看dtree的文档-->
[color=red]<script type="text/javascript">
d = new dTree('d');
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','/');
d.add(2,0,'Node 2','/');
d.add(3,1,'Node 1.1','/');
d.add(4,0,'Node 3','/');
d.add(5,3,'Node 1.1.1','/');
d.add(6,5,'Node 1.1.1.1','/');
d.add(7,0,'Node 4','/');
d.add(8,1,'Node 1.2','/');
d.add(9,0,'My Pictures','/','Pictures I\'ve taken over the
years','','','dtree/img/imgfolder.gif');
d.add(10,9,'The trip to Iceland','/','Pictures of Gullfoss and Geysir');
d.add(11,9,'Mom\'s birthday','/');
d.add(12,0,'Recycle Bin','/','','','dtree/img/trash.gif');
document.write(d);
</script>[/color] </div>
</body>
</html>
5、注意：如果图片不能显示，根据你建立的目录结构需要修改dtree.js中的this.icon属性中的相关图片链接路径
6、部署运行，效果已经出来了。
342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
