欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久

打開(kāi)APP
userphoto
未登錄

開(kāi)通VIP，暢享免費電子書(shū)等14項超值服

開(kāi)通VIP

首頁(yè)

好書(shū)

留言交流

下載APP

聯(lián)系客服
Dtree+Jquery動(dòng)態(tài)生成樹(shù)節點(diǎn)例子

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

         Dtree目錄樹(shù)的總結

                  一：函數

                           1：頁(yè)面中
                              tree.add(id,pid,name,url,title,target,icon,iconOpen,open);
                                  參數說(shuō)明：
                                              id         ：節點(diǎn)自身的id
                                              pid       ：節點(diǎn)的父節點(diǎn)的id
                                              name    ：節點(diǎn)顯示在頁(yè)面上的名稱(chēng)
                                              url        ：節點(diǎn)的鏈接地址
                                              title      ：鼠標放在節點(diǎn)上所出現的提示信息
                                              target   ：節點(diǎn)鏈接所打開(kāi)的目標frame(如框架目標mainFrame,_blank,_self 類(lèi))
                                              icon      ：節點(diǎn)關(guān)閉時(shí)的顯示圖片的路徑
                                              iconOpen：節點(diǎn)打開(kāi)時(shí)的顯示圖片的路徑
                                              open    ：布爾型，節點(diǎn)是否打開(kāi)（默認為false）
                                             注：open項：頂級節點(diǎn)一般采用true，即pid是－1的節點(diǎn)

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


二：頁(yè)面中的書(shū)寫(xiě)
          1：默認值的書(shū)寫(xiě)規則（從左至右，依次省略）
                          即 tree.add(id,pid,name,url);后面5個(gè)參數可以省略
          2：有間隔時(shí)的默認值（如存在第6個(gè)參數，但第5個(gè)參數想用默認值）
                         即 tree.add(id,pid,name,url,"",target);必須這樣寫(xiě)
         3：樣式表
           （1）：可以將dtree.css中的樣式附加到你的應用中的主css中，如a.css
           （2）：也可以同時(shí)引用dtree.css與a.css兩個(gè)文件，但前提條件是兩個(gè)css文件中不能有重復的樣式
     

Html代碼
  1. <link href="/jingjindatabase/pub/css/a.css" rel="stylesheet" type="text/css" />  
  2. <link href="/jingjindatabase/pub/css/dtree.css" rel="stylesheet" type="text/css" />  

          4：頁(yè)面代碼書(shū)寫(xiě)的位置是：一般寫(xiě)在表格的td之中

Javascript代碼
  1. <script type="text/javascript" src="/myMobanGis/pub/js/dtree.js"></script>   
  2. <script type="text/javascript">   
  3. tree = new dTree('tree');   
  4. tree.add("1","-1","京津","","","","","",true);   
  5. tree.add("11","1","A","","","","","",true);   
  6.  tree.add("110","11","A-1","content.jsp?moduleName=XXX","","mainFrame");   
  7.  tree.add("111","11","A-2","javascript:void(0)","","鏈接在哪里顯示");   
  8.  tree.add("112","11","A-3","javascript:void(0)","","mainFrame");   
  9.  tree.add("113","11","A-4","/.jsp","","mainFrame");   
  10.  tree.add("114","11","A-5","/.jsp","","mainFrame");   
  11.  tree.add("115","11","A-6","/.jsp","","mainFrame");   
  12.     
  13. tree.add("12","1","B","","","","","",true);   
  14.  tree.add("121","12","B-1","javascript:調用本頁(yè)內的js函數","","mainFrame");   
  15.  tree.add("122","12","B-2");   
  16. tree.add("13","1","C","","","","","",true);   
  17.  tree.add("131","13","C-1","javascript:void(0)","","mainFrame");   
  18.  tree.add("132","13","C-2","javascript:void(0)","","mainFrame");   
  19.  tree.add("133","13","C-3","javascript:void(0)","","mainFrame");   
  20. tree.add("14","1","D","","","","","",true);   
  21.  tree.add("141","14","D-1","javascript:void(0)","","mainFrame");   
  22. document.write(tree);   
  23. </script>  

 說(shuō)明：這是靜態(tài)的代碼，動(dòng)態(tài)的可用循環(huán)加入。其他 tree.add(id,pid,name,url,"","","","",true);

 

三：css文件的注解
1:dtree.css

Css代碼
  1. .dtree {//定義目錄樹(shù)節點(diǎn)的字體，字號，顏色   
  2.  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;   
  3.  font-size: 12px;   
  4.  color: #006600;   
  5.  white-space: nowrap;   
  6. }   
  7. .dtree img {//定義選用節點(diǎn)圖標的樣式，位置   
  8.  border: 0px;   
  9.  vertical-align: middle;   
  10. }   
  11. .dtree a {//   
  12.  color: #006600;   
  13.  text-decoration: none;   
  14. }   
  15. .dtree a.node, .dtree a.nodeSel {   
  16.  white-space: nowrap;   
  17.  padding: 0px 0px 0px 0px;   
  18. }   
  19. .dtree a.node:hover, .dtree a.nodeSel:hover {   
  20.  color: #006600;   
  21.  text-decoration: none;   
  22. }   
  23. .dtree a.nodeSel {   
  24.  background-color: #c0d2ec;   
  25. }   
  26. .dtree .clip {   
  27.  overflow: hidden;   
  28. }  

 

Javascript代碼
  1. a = new dTree('a');   
  2. a.config.useStatusText=true;   
  3. a.config.closeSameLevel=true;   
  4. a.config.useCookies=false;   
  5. a.add(0,-1,'Tree example','javascript: void(0);');   
  6. a.add(1, 0,'Node 1','javascript:void(0);');   
  7. a.add(2, 1,'Node 2','javascript:void(0);');   
  8. a.add(3, 1,'Node 3','javascript:void(0);');   
  9. a.add(4, 0,'Node 4','javascript:void(0);');   
  10. a.add(5, 4,'Node 5','javascript:void(0);');   
  11. a.add(6, 4,'Node 6','javascript:void(0);');   
  12. a.add(7, 2,'Node 7','javascript:void(0);');   
  13. a.add(8, 6,'Node 8','javascript:void(0);');   
  14. a.add(9, 1,'Node 9','javascript:void(0);');   
  15. a.add(10, 2,'Node 10','javascript:void(0);');   
  16. a.add(11, 8,'Node 11','javascript:void(0);');   
  17. a.add(12, 2,'Node 12','javascript:void(0);');   
  18. a.add(13, 9,'Node 13','javascript:void(0);');   
  19. a.add(14, 4,'Node 14','javascript:void(0);');   
  20. a.add(15, 2,'Node 15','javascript:void(0);');   
  21. a.add(16, 1,'Node 16','javascript:void(0);');   
  22. a.add(17, 4,'Node 17','javascript:void(0);');   
  23. a.add(18, 6,'Node 18','javascript:void(0);');   
  24. a.add(19, 7,'Node 19','javascript:void(0);');   
  25. document.write(a);   
  26.             
  27.    

      tree2.jsp   demo中的一個(gè)jsp頁(yè)面. 靜態(tài)的生成一棵樹(shù). (二級節點(diǎn))

       

Java代碼
  1. <%@ page language="java" pageEncoding="utf-8"%>   
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
  3. <html>   
  4.     <head>   
  5.         <title>樹(shù)形結構_____普通生成樹(shù)的方式</title>   
  6.         <link rel="stylesheet" href="dtree.css" type="text/css"></link>   
  7.         <script type="text/javascript" src="dtree.js"></script>   
  8.         <script>   
  9.                /*     
  10.                     tree.add(id,pid,name,url,title,target,icon,iconOpen,open);  
  11.                     id        ：節點(diǎn)自身的id  
  12.                     pid       ：節點(diǎn)的父節點(diǎn)的id  
  13.                     name      ：節點(diǎn)顯示在頁(yè)面上的名稱(chēng)  
  14.                     url       ：節點(diǎn)的鏈接地址  
  15.                     title     ：鼠標放在節點(diǎn)上所出現的提示信息  
  16.                     target    ：節點(diǎn)鏈接所打開(kāi)的目標frame（如框架目標mainFrame或是_blank,_self之類(lèi)）  
  17.                     icon      ：節點(diǎn)關(guān)閉時(shí)的顯示圖片的路徑  
  18.                     iconOpen  ：節點(diǎn)打開(kāi)時(shí)的顯示圖片的路徑  
  19.                     open      ：布爾型，節點(diǎn)是否打開(kāi)（默認為false）  
  20.                     ------------------------------------------------  
  21.                     東城區、西城區、崇文區、宣武區、朝陽(yáng)區、豐臺區、石景山區、  
  22.                     海淀區、門(mén)頭溝區、房山區、通州區、順義區、 昌平區、  
  23.                    大興區、懷柔區、平谷區 、 密云縣、延慶縣  
  24.                    ------------------------------------------------  
  25.                 */  
  26.         </script>   
  27.                 <script type="text/javascript">   
  28.                  tree = new dTree('tree');//創(chuàng )建一個(gè)對象.   
  29.                  tree.add("1","-1","中國","","","","","",false);   
  30.                  tree.add("11","1","北京","","","","","",false);   
  31.                  tree.add("110","11","東城區","連接地址可以從數據庫里面動(dòng)態(tài)查詢(xún)出來(lái)..","東城區","打開(kāi)目標位置");   
  32.                  tree.add("111","11","西城區","連接地址可以從數據庫里面動(dòng)態(tài)查詢(xún)出來(lái)..","","鏈接在哪里顯示");   
  33.                  tree.add("112","11","崇文區","連接地址可以從數據庫里面動(dòng)態(tài)查詢(xún)出來(lái)..","","mainFrame");   
  34.                  tree.add("113","11","宣武區","","","_blank");   
  35.                  tree.add("114","11","朝陽(yáng)區","/.jsp","","mainFrame");   
  36.                  tree.add("115","11","豐臺區","/.jsp","","mainFrame");   
  37.                  tree.add("116","11","石景山區","/.jsp","","mainFrame");   
  38.                  tree.add("117","11","海淀區","/.jsp","","mainFrame");   
  39.                  tree.add("118","11","門(mén)頭溝區","/.jsp","","mainFrame");   
  40.                  tree.add("119","11","房山區","/.jsp","","mainFrame");   
  41.                  tree.add("120","11","通州區","/.jsp","","mainFrame");   
  42.                  tree.add("121","11","順義區","/.jsp","","mainFrame");    
  43.                  tree.add("122","11","昌平區","/.jsp","","mainFrame");   
  44.                  tree.add("123","11","大興區","/.jsp","","mainFrame");   
  45.                  tree.add("124","11","懷柔區","/.jsp","","mainFrame");   
  46.                  tree.add("125","11","平谷區","/.jsp","","mainFrame");   
  47.                  tree.add("126","11","延慶縣","/.jsp","","mainFrame");   
  48.                  tree.add("127","11","密云縣","/.jsp","","mainFrame");   
  49.                  //==================================================   
  50.                  tree.add("12","1","湖南","","","","","",false);   
  51.                  tree.add("121","12","株洲","javascript:調用本頁(yè)內的js函數","","mainFrame");   
  52.                  tree.add("122","12","長(cháng)沙");   
  53.                 //====================================================   
  54.                  tree.add("13","1","湖北","","","","","",false);   
  55.                  tree.add("131","13","武漢","javascript:void()","","mainFrame");   
  56.                  tree.add("132","13","宜昌","javascript:void()","","mainFrame");   
  57.                  tree.add("133","13","孝感","javascript:void()","","mainFrame");   
  58.                  //===================================================      
  59.                  tree.add("14","1","廣東","","","","","",false);   
  60.                  tree.add("141","14","佛山","javascript:void()","","mainFrame");   
  61.                  document.write(tree);   
  62.                 </script>   
  63.     </head>   
  64.     <body>   
  65.     </body>   
  66. </html>  

 

         不羅嗦啦..上面的只是讓你大概了解一下.dtree怎么用.

 

    dtree+JQuery動(dòng)態(tài)生成樹(shù).思路其實(shí)很簡(jiǎn)單...  首先把樹(shù)的節點(diǎn)信息存儲到數據庫,然后在servlet或jsp中獲取數據庫表中的數據,把這些信息寫(xiě)成在xml文件中.然后界面jsp頁(yè)面通過(guò)JQuery實(shí)現對改servlet的請求.并且回調方法中接受xml數據對象.并且遍歷xml文件,取得xml文件中的節點(diǎn)的屬性或文本數據.再循環(huán)的對dtree添加節點(diǎn).。

 

1 . 在 MYSQL 中的test數據庫中創(chuàng )建表.tree_table. 

     SQL語(yǔ)句.

Sql代碼
  1. tree_table  CREATE TABLE `tree_table` (                       
  2.               `id` int(11) NOT NULL auto_increment,           
  3.               `nodeId` varchar(12) NOT NULL  ,       
  4.               `parentId` varchar(12) NOT NULL  ,     
  5.               `hrefAddress` varchar(85)  ,           
  6.               `nodeName` varchar(20)  ,              
  7.               PRIMARY KEY  (`id`)                             
  8.             ) ENGINE=InnoDB DEFAULT CHARSET=gbk      

 

2.連接數據庫的類(lèi).主要是讀取表中的數據.

       

Java代碼
  1. package com.dao;   
  2.   
  3. import java.sql.Connection;   
  4. import java.sql.DriverManager;   
  5. import java.sql.PreparedStatement;   
  6. import java.sql.ResultSet;   
  7. import java.sql.SQLException;   
  8. import java.util.ArrayList;   
  9.   
  10. public class DaoTest {   
  11.     Connection con = null;   
  12.   
  13.     public Connection getConnection() {   
  14.         Connection conn = null;   
  15.         String url = "jdbc:mysql://localhost/test?useUnicode=true&characterEncoding=gbk";   
  16.         String user = "root";   
  17.         String password = "admin";   
  18.         try {   
  19.             if (conn == null) {   
  20.                 Class.forName("com.mysql.jdbc.Driver").newInstance();   
  21.                 conn = DriverManager.getConnection(url, user, password);   
  22.             }   
  23.         } catch (Exception e) {   
  24.             System.out.println("連接失敗");   
  25.             return null;   
  26.         } finally {   
  27.             url = null;   
  28.             user = null;   
  29.             password = null;   
  30.         }   
  31.         return conn;   
  32.     }   
  33.   
  34.     public ArrayList<Nodes> getNodeInfo() {   
  35.         String sql = "select nodeId ,parentId ,hrefAddress ,nodeName from tree_table order by id ";   
  36.         PreparedStatement pre = null;   
  37.         Connection conn = null;   
  38.         conn = getConnection();   
  39.         ResultSet rs = null;   
  40.         ArrayList<Nodes> list = new ArrayList<Nodes>();   
  41.         try {   
  42.             pre = conn.prepareStatement(sql);   
  43.             rs =pre.executeQuery();   
  44.             while (rs.next()){   
  45.                 Nodes node = new Nodes();   
  46.                 node.setHrefAddress(rs.getString("hrefAddress"));   
  47.                 node.setNodeId(rs.getString("nodeId"));   
  48.                 node.setParentId(rs.getString("parentId"));   
  49.                 node.setNodeName(rs.getString("nodeName"));   
  50.                 list.add(node);   
  51.             }   
  52.             rs.close();   
  53.             pre.close();   
  54.             conn.close();   
  55.         } catch (SQLException e) {   
  56.             e.printStackTrace();   
  57.         }finally{   
  58.              pre = null;   
  59.              conn = null;   
  60.              rs = null;   
  61.         }   
  62.         return list;   
  63.     }   
  64.   
  65. }  

 3. 節點(diǎn)。JAVABEAN.類(lèi).

   

Java代碼
  1. package com.dao;   
  2.   
  3. public class Nodes {   
  4.     private int id;   
  5.     private String nodeId;   
  6.     private String parentId;   
  7.     private String hrefAddress;   
  8.     private String nodeName;   
  9.   
  10.     public int getId() {   
  11.         return id;   
  12.     }   
  13.   
  14.     public void setId(int id) {   
  15.         this.id = id;   
  16.     }   
  17.   
  18.     public String getNodeId() {   
  19.         return nodeId;   
  20.     }   
  21.   
  22.     public void setNodeId(String nodeId) {   
  23.         this.nodeId = nodeId;   
  24.     }   
  25.   
  26.     public String getParentId() {   
  27.         return parentId;   
  28.     }   
  29.   
  30.     public void setParentId(String parentId) {   
  31.         this.parentId = parentId;   
  32.     }   
  33.   
  34.     public String getHrefAddress() {   
  35.         return hrefAddress;   
  36.     }   
  37.   
  38.     public void setHrefAddress(String hrefAddress) {   
  39.         this.hrefAddress = hrefAddress;   
  40.     }   
  41.   
  42.     public String getNodeName() {   
  43.         return nodeName;   
  44.     }   
  45.   
  46.     public void setNodeName(String nodeName) {   
  47.         this.nodeName = nodeName;   
  48.     }   
  49.   
  50. }  

 4.創(chuàng )建一個(gè)Serlvet 來(lái)生成xml文件.

          注意: response.setContentType("text/xml;charset=utf-8");

 

Java代碼
  1. package com.handler;   
  2.   
  3. import java.io.IOException;   
  4. import java.io.PrintWriter;   
  5. import java.util.ArrayList;   
  6.   
  7. import javax.servlet.ServletException;   
  8. import javax.servlet.http.HttpServlet;   
  9. import javax.servlet.http.HttpServletRequest;   
  10. import javax.servlet.http.HttpServletResponse;   
  11.   
  12. import com.dao.DaoTest;   
  13. import com.dao.Nodes;   
  14. public class NodesPrint extends HttpServlet {   
  15.     private static final long serialVersionUID = 1L;   
  16.     public void doGet(HttpServletRequest request, HttpServletResponse response)   
  17.             throws ServletException, IOException {   
  18.                  doPost(request, response);   
  19.     }   
  20.     public void doPost(HttpServletRequest request, HttpServletResponse response)   
  21.             throws ServletException, IOException {   
  22.            request.setCharacterEncoding("utf-8");   
  23.            response.setContentType("text/xml;charset=utf-8");   
  24.            PrintWriter out = response.getWriter();   
  25.            DaoTest test = new DaoTest();   
  26.            ArrayList<Nodes> list=  test.getNodeInfo();   
  27.             if(list!=null&&list.size()>0){   
  28.                 out.println("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");   
  29.                 out.println("<nodes>");   
  30.                 for(int i=0;i<list.size();i++){   
  31.                     Nodes node = list.get(i);   
  32.                     out.println("<node nodeId='"+node.getNodeId()+"' parentId='"+node.getParentId()+"' hrefAddress='"+node.getHrefAddress()+"'>"+node.getNodeName()+"</node>");   
  33.                 }   
  34.                 out.println("</nodes>");   
  35.             }   
  36.     }   
  37. }  

 5. 將dtree.js 和dtree.css，jquery.js, img文件夾.放在WebRoot下面.(工程的根目錄)

 6.  編寫(xiě)我們的tree.jsp頁(yè)面.

      

Java代碼
  1. <%@ page language="java" pageEncoding="utf-8"%>   
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
  3. <html>   
  4.  <head>   
  5.   <title>樹(shù)形結構___ajax請求方式</title>   
  6.   <script type="text/javascript" src="dtree.js"></script>   
  7.   <script type="text/javascript" src="jquery.js"></script>   
  8.   <link rel="stylesheet" href="dtree.css" type="text/css"></link>   
  9.   <script type="text/javascript">   
  10.    tree = new dTree('tree');//創(chuàng )建一個(gè)對象.   
  11.    $.ajax({    
  12.     <A href="'NodesPrint'">url:'NodesPrint'</A>,    
  13.     type:'post', //數據發(fā)送方式    
  14.     dataType:'xml', //接受數據格式    
  15.     error:function(json){   
  16.              alert( "not lived!");   
  17.        },   
  18.     async: false ,//同步方式   
  19.     success: function(xml){   
  20.          $(xml).find("node").each(function(){    
  21.         var nodeId=$(this).attr("nodeId");     
  22.          var parentId=$(this).attr("parentId");     
  23.         var hrefAddress=$(this).attr("hrefAddress");     
  24.         var nodeName=$(this).text();    
  25.         tree.add(nodeId,parentId,nodeName,hrefAddress,"","","","",false);   
  26.                         });   
  27.            }   
  28.      });   
  29.         document.write(tree);   
  30.   </script>   
  31.  </head>   
  32.  <body>   
  33.  </body>   
  34. </html>  

    demo的結構圖:

           

    

 附件說(shuō)明.

  1.tree2.jsp.一個(gè)簡(jiǎn)單jsp。靜態(tài)生成一個(gè)樹(shù)結構

  2.dtree的用法文章及其例子.

  3.dtree+jquery動(dòng)態(tài)生成樹(shù)的demo_____DtreeTest

                

  

本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請點(diǎn)擊舉報。
打開(kāi)APP，閱讀全文并永久保存 查看更多類(lèi)似文章
猜你喜歡
類(lèi)似文章
JS的dtree和xtree介紹
dtree 點(diǎn)擊事件
JavaScript樹(shù)型菜單 dtree_Java Web & EE Design and...
dTree無(wú)限級目錄樹(shù)和JQuery同步ajax請求 - - ITeye技術(shù)網(wǎng)站
JTree右鍵菜單
dtree.js樹(shù)示例
更多類(lèi)似文章 >>
生活服務(wù)
分享 收藏 導長(cháng)圖 關(guān)注 下載文章
綁定賬號成功
后續可登錄賬號暢享VIP特權！
如果VIP功能使用有故障，
可點(diǎn)擊這里聯(lián)系客服！

聯(lián)系客服

欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久