zoukankan      html  css  js  c++  java

  • 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文件中不能有重复的样式
         

    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：页面代码书写的位置是：一般写在表格的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:调用本页内的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>  

     说明：这是静态的代码，动态的可用循环加入。其他 tree.add(id,pid,name,url,"","","","",true);

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

    Css代码  收藏代码
    1. .dtree {//定义目录树节点的字体，字号，颜色  
    2.  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;  
    3.  font-size: 12px;  
    4.  color: #006600;  
    5.  white-space: nowrap;  
    6. }  
    7. .dtree img {//定义选用节点图标的样式，位置  
    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中的一个jsp页面. 静态的生成一棵树. (二级节点)

           

    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>树形结构_____普通生成树的方式</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        ：节点自身的id 
    12.                     pid       ：节点的父节点的id 
    13.                     name      ：节点显示在页面上的名称 
    14.                     url       ：节点的链接地址 
    15.                     title     ：鼠标放在节点上所出现的提示信息 
    16.                     target    ：节点链接所打开的目标frame（如框架目标mainFrame或是_blank,_self之类） 
    17.                     icon      ：节点关闭时的显示图片的路径 
    18.                     iconOpen  ：节点打开时的显示图片的路径 
    19.                     open      ：布尔型，节点是否打开（默认为false） 
    20.                     ------------------------------------------------ 
    21.                     东城区、西城区、崇文区、宣武区、朝阳区、丰台区、石景山区、 
    22.                     海淀区、门头沟区、房山区、通州区、顺义区、 昌平区、 
    23.                    大兴区、怀柔区、平谷区 、 密云县、延庆县 
    24.                    ------------------------------------------------ 
    25.                 */  
    26.         </script>  
    27.                 <script type="text/javascript">  
    28.                  tree = new dTree('tree');//创建一个对象.  
    29.                  tree.add("1","-1","中国","","","","","",false);  
    30.                  tree.add("11","1","北京","","","","","",false);  
    31.                  tree.add("110","11","东城区","连接地址可以从数据库里面动态查询出来..","东城区","打开目标位置");  
    32.                  tree.add("111","11","西城区","连接地址可以从数据库里面动态查询出来..","","链接在哪里显示");  
    33.                  tree.add("112","11","崇文区","连接地址可以从数据库里面动态查询出来..","","mainFrame");  
    34.                  tree.add("113","11","宣武区","","","_blank");  
    35.                  tree.add("114","11","朝阳区","/.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","门头沟区","/.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:调用本页内的js函数","","mainFrame");  
    52.                  tree.add("122","12","长沙");  
    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动态生成树.思路其实很简单...  首先把树的节点信息存储到数据库,然后在servlet或jsp中获取数据库表中的数据,把这些信息写成在xml文件中.然后界面jsp页面通过JQuery实现对改servlet的请求.并且回调方法中接受xml数据对象.并且遍历xml文件,取得xml文件中的节点的属性或文本数据.再循环的对dtree添加节点.。

    1 . 在 MYSQL 中的test数据库中创建表.tree_table. 

         SQL语句.

    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.连接数据库的类.主要是读取表中的数据.

           

    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&amp;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. 节点。JAVABEAN.类.

       

    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.创建一个Serlvet 来生成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.  编写我们的tree.jsp页面.

          

    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>树形结构___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');//创建一个对象.  
    11.    $.ajax({   
    12.     <a href="/admin/blogs/350056/'NodesPrint'">url:'NodesPrint'</a>,   
    13.     type:'post', //数据发送方式   
    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的结构图:

               

        

     附件说明.

      1.tree2.jsp.一个简单jsp。静态生成一个树结构

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

      3.dtree+jquery动态生成树的demo_____DtreeTest

    原文：http://www.iteye.com/topic/350056   【可下载】
  • 相关阅读:
    iOS有用的三方库和高效工具记录
    正则表达式
    Exception Type & Exception Code
    信鸽推送(XGPush)
    在vue中使用animate.css
    vue 中父子组件传值：props和$emit
    预编译scss以及scss和less px 转rem
    ES6箭头函数及模版字符串
    移动端页面a input去除点击效果及pc端切换
    vue2搭建简易spa
  • 原文地址：https://www.cnblogs.com/zhangxiaozhong/p/3269959.html
Copyright © 2011-2022 走看看