📄 jsp使用dtree（树状目录）.txt
字号:
dtree动态树+Javascript右键菜单
从网上下载dtree控件
解压缩得dtree目录下包括这些文件：default1.html 、default2html 、default3.html 、 dtree.js 、 dtree.css 和img目录
复制default1.html，并把粘贴后的文件重命名为Tree.jsp
注意dtree目录下的文件结构不要改变，否则树就不会正常显示
5、在Web应用中指定首页为Tree.jsp页面。
6、Tree.jsp中的代码如下：
<html>
<head>
<title>destroydrop » JavaScripts » Tree</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="StyleSheet" href="tree.css" type="text/css">
<script type="text/javascript" src="tree.js"></script>
<script type="text/javascript">
<!--
var Tree = new Array;
// nodeId | parentNodeId | nodeName | nodeUrl
Tree[0] = "1|0|Page 1|#";
Tree[1] = "2|1|Page 1.1|#";
Tree[2] = "3|1|Page 1.2jkhjh|#";
Tree[3] = "4|3|Page 1.2.1|#";
Tree[4] = "5|1|Page 1.3|#";
Tree[5] = "6|2|Page 1.1.1|#";
Tree[6] = "7|6|Page 1.1.1.1|#";
Tree[7] = "8|6|Page 1.1.1.2|#";
Tree[8] = "9|1|Page 1.4|#";
Tree[9] = "10|9|Page 1.4.1|#";
Tree[10] = "11|0|Page 2|#";
//-->
</script>
</head>
<body>
<b>数据结构</b><br /><br /><br />
<div class="tree">
<script type="text/javascript">
<!--
createTree(Tree);
//-->
</script>
</div>
<br /><br />
</body>
</html>
这样就能用了。
下面建立自己的，这是我的例子
<%@ page language="java" contentType="text/html;charset=utf-8"%>
<%@ page import="java.util.*"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html:html lang="true">
<head>
<html:base />
<title>testDtree.jsp</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">
<link rel="StyleSheet" href="css/dtree.css" type="text/css" />
<script type="text/javascript" src="js/dtree.js"></script>
</head>
<body>
<table width="180">
<tr>
<td height="300" valign="top" nowrap>
<font></font>
<script type="text/javascript">
tree = new dTree('tree');
tree.config.folderLinks=false;
tree.config.useCookies=false;
tree.add("0","-1","任教课程","jsp"," ","_blank");
<%
List list=(List)request.getSession().getAttribute("subject");
String s="";
for(int i=0;i<list.size();i++)
{
s=(String)list.get(i);
%>
tree.add("<%=i + 1%>","0","<%=s%>", "loginfailure.jsp"," ","_blank");
<%
}
%>
document.write(tree);
</script>
<font></font>
</td>
</tr>
</table>
</body>
</html:html>
8、注意看红色的代码，这才是真正为树添加节点的部分。
tree.add("0","-1","任教课程","jsp"," ","_blank");
这一句为树添加了一个根节点，显示名称为'任教课程'
tree.add("<%=i + 1%>","0","<%=s%>", "loginfailure.jsp"," ","_blank");
这一句在树的根节点下面添加了一个子节点。
常用的：
第一个参数，表示当前节点的ID
第二个参数，表示当前节点的父节点的ID
第三个参数，节点要显示的文字
第四个参数，点击该节点的超链接（注意也可以是某个servlet或是struts应用中的某个.do请求）
第五个参数，鼠标移至该节点时显示的文字
第六个参数，指定点击该节点时在哪个桢中打开超链接
……
Dtree所引用的css
一：dtree.css
.dtree {//定义目录树节点的字体，字号，颜色
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #006600;
white-space: nowrap;
}
.dtree img {//定义选用节点图标的样式，位置
border: 0px;
vertical-align: middle;
}
.dtree a {//
color: #006600;
text-decoration: none;
}
.dtree a.node, .dtree a.nodeSel {
white-space: nowrap;//表格随着文字自动伸展（如果未设置TD宽度，则noWrap属性是起作用的；如果设置了TD宽度，则noWrap属性是不起作用的。）
padding: 0px 0px 0px 0px;
}
.dtree a.node:hover, .dtree a.nodeSel:hover {
color: #006600;
text-decoration: none;
}
.dtree a.nodeSel {//节点选中后的节点背景颜色
background-color: #c0d2ec;
}
.dtree .clip {
overflow: hidden;
}
二：tree.css
body {SCROLLBAR-FACE-COLOR:#D2FFD2;
SCROLLBAR-HIGHLIGHT-COLOR: #8AA583;
SCROLLBAR-SHADOW-COLOR: #8AA583;
SCROLLBAR-3DLIGHT-COLOR: #ffffff;
SCROLLBAR-ARROW-COLOR: #8AA583;
SCROLLBAR-TRACK-COLOR: #E1FFE1;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
background-attachment: fixed;
//scroll : 背景图像是随对象内容滚动
//fixed : 背景图像固定
background-repeat: no-repeat;
//background-repeat : repeat | no-repeat | repeat-x | repeat-y
//repeat : 背景图像在纵向和横向上平铺
//no-repeat : 背景图像不平铺
//repeat-x : 背景图像在横向上平铺
//repeat-y : 背景图像在纵向平铺
background-color: EFF7F7;
}
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -