動態樹dTree 2008-12-19 15:19
dtree主頁：http://destroydrop.com/javascripts/tree/ (下載地址在右上角)
下載後主要用到dtree.js和dtree.css
使用說明：
<html>
<head>
<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"> </script>
</head>
<body>
<div class="dtree">
<script type="text/javascript">
d = new dTree('d');
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','example01.html');
d.add(2,0,'Node 2','example01.html');
d.add(3,1,'Node 1.1','example01.html');
d.add(4,0,'Node 3','example01.html');
d.add(5,3,'Node 1.1.1','example01.html');
d.add(6,5,'Node 1.1.1.1','example01.html');
d.add(7,0,'Node 4','example01.html');
d.add(8,1,'Node 1.2','example01.html');
d.add(9,0,'My Pictures','example01.html','Pictures I/'ve taken over the years','','','img/imgfolder.gif');
d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
d.add(11,9,'Mom/'s birthday','example01.html');
d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');
document.write(d);
</script>
</div>
</body>
</html>
參數說明：
id ：節點自身的id
pid ：節點的父節點的id
name ：節點顯示在頁面上的名稱
url ：節點的鏈接地址
title ：鼠標放在節點上所出現的提示信息
target ：節點鏈接所打開的目標frame（如框架目標mainFrame或是_blank,_self之類）
icon ：節點關閉時的顯示圖片的路徑
iconOpen：節點打開時的顯示圖片的路徑
open ：布爾型，節點是否打開（默認爲false）
注：open項：頂級節點一般採用true，即pid是－1的節點
1：默認值的書寫規則（從左至右，依次省略）
即 d.add(id,pid,name,url);後面5個參數可以省略
2：有間隔時的默認值（如存在第6個參數，但第5個參數想用默認值）
即 tree.add(id,pid,name,url,"",target);必須這樣寫
其他 tree.add(id,pid,name,url,"","","","",true);
動態生成：
1）在數據庫建tree_info表，有nodeId，parentNodeId，nodeName，nodeUrl四個字段，來存儲節點信息。
2）編寫java類，用於從數據庫找出節點信息，並且生成javascript腳本。
詳細過程:
1）在數據庫建表，腳本如下(以mysql爲例)：
CREATE TABLE 'test'.'tree_info' (
'node_id' INTEGER UNSIGNED NOT NULL DEFAULT -1,
'parent_id' INTEGER UNSIGNED NOT NULL DEFAULT -1,
'node_name' VARCHAR(45) NOT NULL,
'ref_url' VARCHAR(45) NOT NULL,
PRIMARY KEY('node_id')
)
2）編寫TreeInfo.java，這個類用於封裝節點信息
package com.diegoyun.web.tree;
/**
* @author Diegoyun
* @version 1.0
*/
public class TreeInfo {
private int nodeId = -1;//node id
private int parentId = -1;//parentId
private String nodeName = null;//node name
private String url = null;//url references
public int getNodeId() {
return nodeId;
}
public void setNodeId(int nodeId) {
this.nodeId = nodeId;
}
public int getParentId() {
return parentId;
}
public void setParentId(int parentId) {
this.parentId = parentId;
}
public String getNodeName() {
return nodeName;
}
public void setNodeName(String nodeName) {
this.nodeName = nodeName;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
}
編寫TreeUtil.java，用於從數據庫得到節點信息，封裝到TreeInfo對象，並生成javascript腳本
TreeUtil.java
package com.diegoyun.web.tree;
import java.util.Collection;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.Connection;
import java.sql.DriverManager;
/**
* @author Diegoyun
* @version 1.0
*/
public class TreeUtil {
public static List retrieveNodeInfos(){
List coll = new ArrayList();
String driverName = "com.mysql.jdbc.Driver";
String host = "localhost";
String port = ":3306";
String serverID = "test";
String userName = "root";
String userPwd = "root";
String url = "jdbc:mysql://" + host + port + "/" + serverID ;
Connection conn = null ;
PreparedStatement ps = null;
ResultSet rs = null;
try{
Class.forName(driverName).newInstance();
conn = DriverManager.getConnection(url , userName , userPwd);
String sql = "select * from tree_info";
ps = conn.prepareStatement(sql);
rs = ps.executeQuery();
TreeInfo info = null;
while(rs!=null && rs.next()){
info = new TreeInfo();
info.setNodeId(rs.getInt(1));
info.setParentId(rs.getInt(2));
info.setNodeName(rs.getString(3));
info.setUrl(rs.getString(4));
coll.add(info);
}
// if(rs!=null){
// rs.close();
// rs=null;
// }
// if(ps!=null){
// ps.close();
// ps=null;
// }
}catch(Exception e){
System.out.println(e);
}
return coll;
}
public static String createTreeInfo(List alist){
StringBuffer contents = new StringBuffer();
contents.append("d = new dTree('d');");
TreeInfo info =null;
for(int max = alist.size(),i=0;i <max;i++){
info = (TreeInfo)alist.get(i);
contents.append("d.add("+info.getNodeId()+","+info.getParentId()+","+"'"+info.getNodeName()+"',"+"'"+info.getUrl()+"');/n");
}
return contents.toString();
}
}
這樣在jsp頁面中,這樣調用：
<html>
<head>
<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"> </script>
</head>
<body>
<script>
<% =TreeUtil.createTreeInfo(retrieveNodeInfos()) %> </script>
</body>
<html>