?? 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 + -