dTree+jquery生成樹

1.先來介紹一下. dtree 的用法.(我引用了以前我收集的一篇文章.還比較詳細,出處不記得啦).文章下面會附帶dtree用法的例子.

         Dtree目錄樹的總結

                  一:函數

                           1:頁面中
                              tree.add(id,pid,name,url,title,target,icon,iconOpen,open);
                                  參數說明:
                                              id         :節點自身的id
                                              pid       :節點的父節點的id
                                              name    :節點顯示在頁面上的名稱
                                              url        :節點的鏈接地址
                                              title      :鼠標放在節點上所出現的提示信息
                                              target   :節點鏈接所打開的目標frame(如框架目標mainFrame,_blank,_self 類)
                                              icon      :節點關閉時的顯示圖片的路徑
                                              iconOpen:節點打開時的顯示圖片的路徑
                                              open    :布爾型,節點是否打開(默認爲false)
                                             注:open項:頂級節點一般採用true,即pid是-1的節點

                            2:dtree.js文件中
                                             約87-113行是一些默認圖片的路徑,注意要指對。


二:頁面中的書寫
          1:默認值的書寫規則(從左至右,依次省略)
                          即 tree.add(id,pid,name,url);後面5個參數可以省略
          2:有間隔時的默認值(如存在第6個參數,但第5個參數想用默認值)
                         即 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:調用本頁內的js函數","","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>

 說明:這是靜態的代碼,動態的可用循環加入。其他 tree.add(id,pid,name,url,"","","","",true);

 

三:css文件的註解
1: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;
 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頁面. 靜態的生成一棵樹. (二級節點)

       

<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>樹形結構_____普通生成樹的方式</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        :節點自身的id
                    pid       :節點的父節點的id
                    name      :節點顯示在頁面上的名稱
                    url       :節點的鏈接地址
                    title     :鼠標放在節點上所出現的提示信息
                    target    :節點鏈接所打開的目標frame(如框架目標mainFrame或是_blank,_self之類)
                    icon      :節點關閉時的顯示圖片的路徑
                    iconOpen  :節點打開時的顯示圖片的路徑
                    open      :布爾型,節點是否打開(默認爲false)
                    ------------------------------------------------
                    東城區、西城區、崇文區、宣武區、朝陽區、豐臺區、石景山區、
                    海淀區、門頭溝區、房山區、通州區、順義區、 昌平區、
                   大興區、懷柔區、平谷區 、 密雲縣、延慶縣
                   ------------------------------------------------
                */
        </script>
                <script type="text/javascript">
                 tree = new dTree('tree');//創建一個對象.
                 tree.add("1","-1","中國","","","","","",false);
                 tree.add("11","1","北京","","","","","",false);
                 tree.add("110","11","東城區","連接地址可以從數據庫裏面動態查詢出來..","東城區","打開目標位置");
                 tree.add("111","11","西城區","連接地址可以從數據庫裏面動態查詢出來..","","鏈接在哪裏顯示");
                 tree.add("112","11","崇文區","連接地址可以從數據庫裏面動態查詢出來..","","mainFrame");
                 tree.add("113","11","宣武區","","","_blank");
                 tree.add("114","11","朝陽區","/.jsp","","mainFrame");
                 tree.add("115","11","豐臺區","/.jsp","","mainFrame");
                 tree.add("116","11","石景山區","/.jsp","","mainFrame");
                 tree.add("117","11","海淀區","/.jsp","","mainFrame");
                 tree.add("118","11","門頭溝區","/.jsp","","mainFrame");
                 tree.add("119","11","房山區","/.jsp","","mainFrame");
                 tree.add("120","11","通州區","/.jsp","","mainFrame");
                 tree.add("121","11","順義區","/.jsp","","mainFrame");
                 tree.add("122","11","昌平區","/.jsp","","mainFrame");
                 tree.add("123","11","大興區","/.jsp","","mainFrame");
                 tree.add("124","11","懷柔區","/.jsp","","mainFrame");
                 tree.add("125","11","平谷區","/.jsp","","mainFrame");
                 tree.add("126","11","延慶縣","/.jsp","","mainFrame");
                 tree.add("127","11","密雲縣","/.jsp","","mainFrame");
                 //==================================================
                 tree.add("12","1","湖南","","","","","",false);
                 tree.add("121","12","株洲","javascript:調用本頁內的js函數","","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動態生成樹.思路其實很簡單...  首先把樹的節點信息存儲到數據庫,然後在servlet或jsp中獲取數據庫表中的數據,把這些信息寫成在xml文件中.然後界面jsp頁面通過JQuery實現對改servlet的請求.並且回調方法中接受xml數據對象.並且遍歷xml文件,取得xml文件中的節點的屬性或文本數據.再循環的對dtree添加節點.。

 

1 . 在 MYSQL 中的test數據庫中創建表.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.連接數據庫的類.主要是讀取表中的數據.

       

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&amp;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. 節點。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.創建一個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>樹形結構___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');//創建一個對象.
   $.ajax({
    url:'NodesPrint',
    type:'post', //數據發送方式
    dataType:'xml', //接受數據格式
    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>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章