1.先來介紹一下. dtree 的用法.(我引用了以前我收集的一篇文章.還比較詳細,出處不記得啦).文章下面會附帶dtree用法的例子.
Dtree目錄樹的總結(jié)
一:函數(shù)
1:頁面中
tree.add(id,pid,name,url,title,target,icon,iconOpen,open);
參數(shù)說明:
id :節(jié)點自身的id
pid :節(jié)點的父節(jié)點的id
name :節(jié)點顯示在頁面上的名稱
url :節(jié)點的鏈接地址
title :鼠標放在節(jié)點上所出現(xiàn)的提示信息
target :節(jié)點鏈接所打開的目標frame(如框架目標mainFrame,_blank,_self 類)
icon :節(jié)點關(guān)閉時的顯示圖片的路徑
iconOpen:節(jié)點打開時的顯示圖片的路徑
open :布爾型,節(jié)點是否打開(默認為false)
注:open項:頂級節(jié)點一般采用true,即pid是-1的節(jié)點
2:dtree.js文件中
約87-113行是一些默認圖片的路徑,注意要指對。
二:頁面中的書寫
1:默認值的書寫規(guī)則(從左至右,依次省略)
即 tree.add(id,pid,name,url);后面5個參數(shù)可以省略
2:有間隔時的默認值(如存在第6個參數(shù),但第5個參數(shù)想用默認值)
即 tree.add(id,pid,name,url,"",target);必須這樣寫
3:樣式表
(1):可以將dtree.css中的樣式附加到你的應用中的主css中,如a.css
(2):也可以同時引用dtree.css與a.css兩個文件,但前提條件是兩個css文件中不能有重復的樣式
<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之中
<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文件的注解
1:dtree.css
.dtree {//定義目錄樹節(jié)點的字體,字號,顏色 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; color: #006600; white-space: nowrap; } .dtree img {//定義選用節(jié)點圖標的樣式,位置 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; }
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中的一個jsp頁面. 靜態(tài)的生成一棵樹. (二級節(jié)點)
<%@ 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é)點自身的id pid :節(jié)點的父節(jié)點的id name :節(jié)點顯示在頁面上的名稱 url :節(jié)點的鏈接地址 title :鼠標放在節(jié)點上所出現(xiàn)的提示信息 target :節(jié)點鏈接所打開的目標frame(如框架目標mainFrame或是_blank,_self之類) icon :節(jié)點關(guān)閉時的顯示圖片的路徑 iconOpen :節(jié)點打開時的顯示圖片的路徑 open :布爾型,節(jié)點是否打開(默認為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)建一個對象. tree.add("1","-1","中國","","","","","",false); tree.add("11","1","北京","","","","","",false); tree.add("110","11","東城區(qū)","連接地址可以從數(shù)據(jù)庫里面動態(tài)查詢出來..","東城區(qū)","打開目標位置"); 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)生成樹.思路其實很簡單... 首先把樹的節(jié)點信息存儲到數(shù)據(jù)庫,然后在servlet或jsp中獲取數(shù)據(jù)庫表中的數(shù)據(jù),把這些信息寫成在xml文件中.然后界面jsp頁面通過JQuery實現(xiàn)對改servlet的請求.并且回調(diào)方法中接受xml數(shù)據(jù)對象.并且遍歷xml文件,取得xml文件中的節(jié)點的屬性或文本數(shù)據(jù).再循環(huán)的對dtree添加節(jié)點.。
1 . 在 MYSQL 中的test數(shù)據(jù)庫中創(chuàng)建表.tree_table.
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ù).
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é)點。JAVABEAN.類.
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)建一個Serlvet 來生成xml文件.
注意: response.setContentType("text/xml;charset=utf-8");
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頁面.
<%@ 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)建一個對象. $.ajax({ , 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.一個簡單jsp。靜態(tài)生成一個樹結(jié)構(gòu)
2.dtree的用法文章及其例子.
3.dtree+jquery動態(tài)生成樹的demo_____DtreeTest