1。原理簡(jiǎn)介
dtree是一個(gè)免費(fèi)的javascript腳本，只需定義有限的幾個(gè)參數(shù)，就可以做出漂亮的樹型菜單。下載目錄：http://www.destroydrop.com/javascripts/tree/
以下是dtree的用法示例：
1）初始化菜單
<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.2|#";
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>
2）調(diào)用函數(shù)
<div class="tree">
<script type="text/javascript">
<!--
createTree(Tree,1,7); // starts the tree at the top and open it at node nr. 7
//-->
</script>
</div>
顯然，如果用動(dòng)態(tài)的腳本來初始化菜單數(shù)組（asp,jsp均可），那就可以很方便的實(shí)現(xiàn)動(dòng)態(tài)的樹型菜單了。
2。jsp動(dòng)態(tài)實(shí)現(xiàn)
分以下步驟實(shí)現(xiàn)動(dòng)態(tài)的樹型菜單：
1）在數(shù)據(jù)庫(kù)建tree_info表，有nodeId，parentNodeId，nodeName，nodeUrl四個(gè)字段，來存儲(chǔ)節(jié)點(diǎn)信息。
2）編寫java類，用于從數(shù)據(jù)庫(kù)找出節(jié)點(diǎn)信息，并且生成javascript腳本。
3）編寫tag類。用于封裝邏輯，簡(jiǎn)化jsp的開發(fā)。
4）建一個(gè)web程序進(jìn)行測(cè)試。
3。詳細(xì)過程
1）在數(shù)據(jù)庫(kù)建表，腳本如下：
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`)
)
我使用mysql數(shù)據(jù)庫(kù)，如果腳本細(xì)節(jié)有出入，請(qǐng)自行修改
按照上面的dTree示例插入數(shù)據(jù)
2）編寫TreeInfo.java，這個(gè)類用于封裝節(jié)點(diǎn)信息
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，用于從數(shù)據(jù)庫(kù)得到節(jié)點(diǎn)信息，封裝到TreeInfo對(duì)象，并生成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("<!--\n");
contents.append("var Tree = new Array;");//create a array in javascript
TreeInfo info =null;
for(int max = alist.size(),i=0;i<max;i++){
info = (TreeInfo)alist.get(i);
//define elements of array
contents.append("Tree[");
contents.append(i);
contents.append("]=\"");
contents.append(info.getNodeId());
contents.append("|");
contents.append(info.getParentId());
contents.append("|");
contents.append(info.getNodeName());
contents.append("|");
contents.append(info.getUrl());
contents.append("\";");
}
contents.append("http://-->");
return contents.toString();
}
public static void main(String[]args){
List alist = TreeUtil.retrieveNodeInfos();
// TreeInfo info = null;
// for(Iterator i = c.iterator();i.hasNext();){
// info = (TreeInfo)i.next();
// System.out.println("*****" + info.getNodeName());
// }
System.out.println(TreeUtil.createTreeInfo(alist));
}
}
3)編寫標(biāo)簽類
InitTreeTag.java
package com.diegoyun.web.taglibs;
import com.diegoyun.web.tree.TreeUtil;
import javax.servlet.jsp.tagext.TagSupport;
import javax.servlet.jsp.JspException;
import java.io.IOException;
/**
* @author Diegoyun
* @version 1.0
*/
public class InitTreeTag extends TagSupport{
public int doEndTag() throws JspException {
StringBuffer tree = new StringBuffer();
tree.append("<script type=\"text/javascript\">\n");
tree.append(TreeUtil.createTreeInfo(TreeUtil.retrieveNodeInfos()));
tree.append("</script>\n");
try{
pageContext.getOut().println(tree.toString());
}catch(IOException ioe){
ioe.printStackTrace();
}
return super.doEndTag();
}
}
ShowTreeTag.java :
package com.diegoyun.web.taglibs;
import javax.servlet.jsp.tagext.TagSupport;
import javax.servlet.jsp.JspException;
import java.io.IOException;
/**
* @author Diegoyun
* @version 1.0
*/
public class ShowTreeTag extends TagSupport{
public int doEndTag() throws JspException {
StringBuffer buffer = showTree();
try {
pageContext.getOut().println(buffer.toString());
}
catch (IOException ioe) {
ioe.printStackTrace();
}
return super.doEndTag();
}
private StringBuffer showTree(){
StringBuffer sb = new StringBuffer();
sb.append("<div class=\"tree\">\n");
sb.append("<script type=\"text/javascript\">\n");
sb.append("<!--\n");
sb.append("createTree(Tree);\n");
sb.append("http://-->\n");
sb.append("</script>\n");
sb.append("</div>\n");
return sb;
}
}
標(biāo)簽的tld如下：
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE taglib
PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.2//EN"
"http://java.sun.com/dtd/web-jsptaglibrary_1_2.dtd">
<taglib>
<tlib-version>1.0</tlib-version>
<jsp-version>1.2</jsp-version>
<short-name>tree</short-name>
<!--initTreeTag-->
<tag>
<name>init</name>
<tag-class>com.diegoyun.web.taglibs.InitTreeTag</tag-class>
<body-content>empty</body-content>
</tag>
<!--ShowTreeTag-->
<tag>
<name>show</name>
<tag-class>com.diegoyun.web.taglibs.ShowTreeTag</tag-class>
<body-content>empty</body-content>
</tag>
</taglib>
4）建立web過程，編寫jsp進(jìn)行測(cè)試。
index.jsp如下：
<%@ page language="java"%>
<%@ taglib uri="/WEB-INF/tlds/tree.tld" prefix="tree"%>
<html>
<head>
<title>Tree example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="StyleSheet" href="tree.css" type="text/css">
<script type="text/javascript" src="tree.js"></script>
<tree:init/>
</head>
<body>
<b>Tree example :</b><br /><br />
<tree:show/>
<br /><br />
<a href="Welcome‘>http://spaces.msn.com/members/diegoyun">Welcome to visit Diego‘s Blog</a>
</body>
</html>
測(cè)試，enjoy yourself！
4。待解決問題
dTree有點(diǎn)小bug，如果把css，img，js的路徑改變，樹就有可能不會(huì)正確顯示。
