|
1.先來介紹一下. dtree 的用法.(我引用了以前我收集的一篇文章.還比較詳細(xì),出處不記得啦).文章下面會附帶dtree用法的例子. Dtree目錄樹的總結(jié) 一：函數(shù) 1：頁面中 2：dtree.js文件中
Html代碼
<link href="/jingjindatabase/pub/css/a.css" rel="stylesheet" type="text/css" /> <link href="/jingjindatabase/pub/css/dtree.css" rel="stylesheet" type="text/css" /> 4：頁面代碼書寫的位置是：一般寫在表格的td之中 Javascript代碼
<script type="text/javascript" src="/myMobanGis/pub/js/dtree.js"></script>
<script type="text/javascript">
tree = new dTree('tree');
tree.add("1","-1","京津","","","","","",true);
tree.add("11","1","A","","","","","",true);
tree.add("110","11","A-1","content.jsp?moduleName=XXX","","mainFrame");
tree.add("111","11","A-2","javascript:void(0)","","鏈接在哪里顯示");
tree.add("112","11","A-3","javascript:void(0)","","mainFrame");
tree.add("113","11","A-4","/.jsp","","mainFrame");
tree.add("114","11","A-5","/.jsp","","mainFrame");
tree.add("115","11","A-6","/.jsp","","mainFrame");
tree.add("12","1","B","","","","","",true);
tree.add("121","12","B-1","javascript:調(diào)用本頁內(nèi)的js函數(shù)","","mainFrame");
tree.add("122","12","B-2");
tree.add("13","1","C","","","","","",true);
tree.add("131","13","C-1","javascript:void(0)","","mainFrame");
tree.add("132","13","C-2","javascript:void(0)","","mainFrame");
tree.add("133","13","C-3","javascript:void(0)","","mainFrame");
tree.add("14","1","D","","","","","",true);
tree.add("141","14","D-1","javascript:void(0)","","mainFrame");
document.write(tree);
</script>
說明：這是靜態(tài)的代碼，動態(tài)的可用循環(huán)加入。其他 tree.add(id,pid,name,url,"","","","",true);
三：css文件的注解 Css代碼
.dtree {//定義目錄樹節(jié)點(diǎn)的字體，字號，顏色
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #006600;
white-space: nowrap;
}
.dtree img {//定義選用節(jié)點(diǎn)圖標(biāo)的樣式，位置
border: 0px;
vertical-align: middle;
}
.dtree a {//
color: #006600;
text-decoration: none;
}
.dtree a.node, .dtree a.nodeSel {
white-space: 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;
}
Javascript代碼
a = new dTree('a');
a.config.useStatusText=true;
a.config.closeSameLevel=true;
a.config.useCookies=false;
a.add(0,-1,'Tree example','javascript: void(0);');
a.add(1, 0,'Node 1','javascript:void(0);');
a.add(2, 1,'Node 2','javascript:void(0);');
a.add(3, 1,'Node 3','javascript:void(0);');
a.add(4, 0,'Node 4','javascript:void(0);');
a.add(5, 4,'Node 5','javascript:void(0);');
a.add(6, 4,'Node 6','javascript:void(0);');
a.add(7, 2,'Node 7','javascript:void(0);');
a.add(8, 6,'Node 8','javascript:void(0);');
a.add(9, 1,'Node 9','javascript:void(0);');
a.add(10, 2,'Node 10','javascript:void(0);');
a.add(11, 8,'Node 11','javascript:void(0);');
a.add(12, 2,'Node 12','javascript:void(0);');
a.add(13, 9,'Node 13','javascript:void(0);');
a.add(14, 4,'Node 14','javascript:void(0);');
a.add(15, 2,'Node 15','javascript:void(0);');
a.add(16, 1,'Node 16','javascript:void(0);');
a.add(17, 4,'Node 17','javascript:void(0);');
a.add(18, 6,'Node 18','javascript:void(0);');
a.add(19, 7,'Node 19','javascript:void(0);');
document.write(a);
tree2.jsp demo中的一個(gè)jsp頁面. 靜態(tài)的生成一棵樹. (二級節(jié)點(diǎn))
Java代碼
<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>樹形結(jié)構(gòu)_____普通生成樹的方式</title>
<link rel="stylesheet" href="dtree.css" type="text/css"></link>
<script type="text/javascript" src="dtree.js"></script>
<script>
/*
tree.add(id,pid,name,url,title,target,icon,iconOpen,open);
id ：節(jié)點(diǎn)自身的id
pid ：節(jié)點(diǎn)的父節(jié)點(diǎn)的id
name ：節(jié)點(diǎn)顯示在頁面上的名稱
url ：節(jié)點(diǎn)的鏈接地址
title ：鼠標(biāo)放在節(jié)點(diǎn)上所出現(xiàn)的提示信息
target ：節(jié)點(diǎn)鏈接所打開的目標(biāo)frame（如框架目標(biāo)mainFrame或是_blank,_self之類）
icon ：節(jié)點(diǎn)關(guān)閉時(shí)的顯示圖片的路徑
iconOpen ：節(jié)點(diǎn)打開時(shí)的顯示圖片的路徑
open ：布爾型，節(jié)點(diǎn)是否打開（默認(rèn)為false）
------------------------------------------------
東城區(qū)、西城區(qū)、崇文區(qū)、宣武區(qū)、朝陽區(qū)、豐臺區(qū)、石景山區(qū)、
海淀區(qū)、門頭溝區(qū)、房山區(qū)、通州區(qū)、順義區(qū)、 昌平區(qū)、
大興區(qū)、懷柔區(qū)、平谷區(qū) 、 密云縣、延慶縣
------------------------------------------------
*/
</script>
<script type="text/javascript">
tree = new dTree('tree');//創(chuàng)建一個(gè)對象.
tree.add("1","-1","中國","","","","","",false);
tree.add("11","1","北京","","","","","",false);
tree.add("110","11","東城區(qū)","連接地址可以從數(shù)據(jù)庫里面動態(tài)查詢出來..","東城區(qū)","打開目標(biāo)位置");
tree.add("111","11","西城區(qū)","連接地址可以從數(shù)據(jù)庫里面動態(tài)查詢出來..","","鏈接在哪里顯示");
tree.add("112","11","崇文區(qū)","連接地址可以從數(shù)據(jù)庫里面動態(tài)查詢出來..","","mainFrame");
tree.add("113","11","宣武區(qū)","","","_blank");
tree.add("114","11","朝陽區(qū)","/.jsp","","mainFrame");
tree.add("115","11","豐臺區(qū)","/.jsp","","mainFrame");
tree.add("116","11","石景山區(qū)","/.jsp","","mainFrame");
tree.add("117","11","海淀區(qū)","/.jsp","","mainFrame");
tree.add("118","11","門頭溝區(qū)","/.jsp","","mainFrame");
tree.add("119","11","房山區(qū)","/.jsp","","mainFrame");
tree.add("120","11","通州區(qū)","/.jsp","","mainFrame");
tree.add("121","11","順義區(qū)","/.jsp","","mainFrame");
tree.add("122","11","昌平區(qū)","/.jsp","","mainFrame");
tree.add("123","11","大興區(qū)","/.jsp","","mainFrame");
tree.add("124","11","懷柔區(qū)","/.jsp","","mainFrame");
tree.add("125","11","平谷區(qū)","/.jsp","","mainFrame");
tree.add("126","11","延慶縣","/.jsp","","mainFrame");
tree.add("127","11","密云縣","/.jsp","","mainFrame");
//==================================================
tree.add("12","1","湖南","","","","","",false);
tree.add("121","12","株洲","javascript:調(diào)用本頁內(nèi)的js函數(shù)","","mainFrame");
tree.add("122","12","長沙");
//====================================================
tree.add("13","1","湖北","","","","","",false);
tree.add("131","13","武漢","javascript:void()","","mainFrame");
tree.add("132","13","宜昌","javascript:void()","","mainFrame");
tree.add("133","13","孝感","javascript:void()","","mainFrame");
//===================================================
tree.add("14","1","廣東","","","","","",false);
tree.add("141","14","佛山","javascript:void()","","mainFrame");
document.write(tree);
</script>
</head>
<body>
</body>
</html>
不羅嗦啦..上面的只是讓你大概了解一下.dtree怎么用.
dtree+JQuery動態(tài)生成樹.思路其實(shí)很簡單... 首先把樹的節(jié)點(diǎn)信息存儲到數(shù)據(jù)庫,然后在servlet或jsp中獲取數(shù)據(jù)庫表中的數(shù)據(jù),把這些信息寫成在xml文件中.然后界面jsp頁面通過JQuery實(shí)現(xiàn)對改servlet的請求.并且回調(diào)方法中接受xml數(shù)據(jù)對象.并且遍歷xml文件,取得xml文件中的節(jié)點(diǎn)的屬性或文本數(shù)據(jù).再循環(huán)的對dtree添加節(jié)點(diǎn).。
1 . 在 MYSQL 中的test數(shù)據(jù)庫中創(chuàng)建表.tree_table. SQL語句. Sql代碼
tree_table CREATE TABLE `tree_table` ( `id` int(11) NOT NULL auto_increment, `nodeId` varchar(12) NOT NULL , `parentId` varchar(12) NOT NULL , `hrefAddress` varchar(85) , `nodeName` varchar(20) , PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=gbk
2.連接數(shù)據(jù)庫的類.主要是讀取表中的數(shù)據(jù).
Java代碼
package com.dao;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
public class DaoTest {
Connection con = null;
public Connection getConnection() {
Connection conn = null;
String url = "jdbc:mysql://localhost/test?useUnicode=true&characterEncoding=gbk";
String user = "root";
String password = "admin";
try {
if (conn == null) {
Class.forName("com.mysql.jdbc.Driver").newInstance();
conn = DriverManager.getConnection(url, user, password);
}
} catch (Exception e) {
System.out.println("連接失敗");
return null;
} finally {
url = null;
user = null;
password = null;
}
return conn;
}
public ArrayList<Nodes> getNodeInfo() {
String sql = "select nodeId ,parentId ,hrefAddress ,nodeName from tree_table order by id ";
PreparedStatement pre = null;
Connection conn = null;
conn = getConnection();
ResultSet rs = null;
ArrayList<Nodes> list = new ArrayList<Nodes>();
try {
pre = conn.prepareStatement(sql);
rs =pre.executeQuery();
while (rs.next()){
Nodes node = new Nodes();
node.setHrefAddress(rs.getString("hrefAddress"));
node.setNodeId(rs.getString("nodeId"));
node.setParentId(rs.getString("parentId"));
node.setNodeName(rs.getString("nodeName"));
list.add(node);
}
rs.close();
pre.close();
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}finally{
pre = null;
conn = null;
rs = null;
}
return list;
}
}
3. 節(jié)點(diǎn)。JAVABEAN.類.
Java代碼
package com.dao;
public class Nodes {
private int id;
private String nodeId;
private String parentId;
private String hrefAddress;
private String nodeName;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getNodeId() {
return nodeId;
}
public void setNodeId(String nodeId) {
this.nodeId = nodeId;
}
public String getParentId() {
return parentId;
}
public void setParentId(String parentId) {
this.parentId = parentId;
}
public String getHrefAddress() {
return hrefAddress;
}
public void setHrefAddress(String hrefAddress) {
this.hrefAddress = hrefAddress;
}
public String getNodeName() {
return nodeName;
}
public void setNodeName(String nodeName) {
this.nodeName = nodeName;
}
}
4.創(chuàng)建一個(gè)Serlvet 來生成xml文件. 注意: response.setContentType("text/xml;charset=utf-8");
Java代碼
package com.handler;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.dao.DaoTest;
import com.dao.Nodes;
public class NodesPrint extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/xml;charset=utf-8");
PrintWriter out = response.getWriter();
DaoTest test = new DaoTest();
ArrayList<Nodes> list= test.getNodeInfo();
if(list!=null&&list.size()>0){
out.println("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
out.println("<nodes>");
for(int i=0;i<list.size();i++){
Nodes node = list.get(i);
out.println("<node nodeId='"+node.getNodeId()+"' parentId='"+node.getParentId()+"' hrefAddress='"+node.getHrefAddress()+"'>"+node.getNodeName()+"</node>");
}
out.println("</nodes>");
}
}
}
5. 將dtree.js 和dtree.css，jquery.js, img文件夾.放在WebRoot下面.(工程的根目錄) 6. 編寫我們的tree.jsp頁面.
Java代碼
<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>樹形結(jié)構(gòu)___ajax請求方式</title>
<script type="text/javascript" src="dtree.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" href="dtree.css" type="text/css"></link>
<script type="text/javascript">
tree = new dTree('tree');//創(chuàng)建一個(gè)對象.
$.ajax({
url:'NodesPrint',
type:'post', //數(shù)據(jù)發(fā)送方式
dataType:'xml', //接受數(shù)據(jù)格式
error:function(json){
alert( "not lived!");
},
async: false ,//同步方式
success: function(xml){
$(xml).find("node").each(function(){
var nodeId=$(this).attr("nodeId");
var parentId=$(this).attr("parentId");
var hrefAddress=$(this).attr("hrefAddress");
var nodeName=$(this).text();
tree.add(nodeId,parentId,nodeName,hrefAddress,"","","","",false);
});
}
});
document.write(tree);
</script>
</head>
<body>
</body>
</html>
demo的結(jié)構(gòu)圖:
附件說明. 1.tree2.jsp.一個(gè)簡單jsp。靜態(tài)生成一個(gè)樹結(jié)構(gòu) 2.dtree的用法文章及其例子. 3.dtree+jquery動態(tài)生成樹的demo_____DtreeTest
|
|
|
