`
wdhdd889
  • 浏览: 151830 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

dTree+jquery实现动态树形

jQueryCSSJavaScriptServletJSP 
阅读更多

首先下载 dTree.jar包

 内包含问价 dtree.css ,dtree.js,img目录,example01.html,api.html

 

另行下载jquery.jar

 

新建web项目

将dtree.css ,dtree.js,img目录 , jquery.jar复制到webRoot目录下

 

 

这里使用手工创建一个动态xml文件（实际项目应用是从数据库获得数据，然后动态创建这样一个xml文件），作为服务端回应的数据

1 创建servlet  FacetServlet.java

 

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;

/**
 * Created by IntelliJ IDEA.
 * User: Administrator
 * Date: 2009-7-13
 * Time: 10:34:44
 * To change this template use File | Settings | File Templates.
 */
public class FacetServlet extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
           response.setContentType("text/xml; charset=UTF-8");
        response.setHeader("Cache-Control","no-cache");
        String bbb = "<response><facet name=\"czxt\"><term>XP</term><term>Linux</term></facet><facet name=\"kfyy\"><term>Java</term><term>C++</term></facet></response>";      
        response.getWriter().println(bbb);
    }
}

 

2  配置web.xml文件

 

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
           version="2.5">
     <servlet>
         <servlet-name>facet</servlet-name>
         <servlet-class>org.shenhongwei.servlet.FacetServlet</servlet-class>
     </servlet>
    <servlet-mapping>
        <servlet-name>facet</servlet-name>
        <url-pattern>/facetServlet</url-pattern>
    </servlet-mapping>
</web-app>

 

3 创建 treetest.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
    <title>Destroydrop &raquo; Javascripts &raquo; Tree</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"/>
</head>
<body>
<div>
    <script type="text/javascript">

      var  tree = new dTree('tree');
        tree.add(0, -1, '刻面管理列表');

                     var intNode = 0;
                     var parentNode = 0;
         $.ajax({
             url:'facetServlet',
             type:'post',
             dataType:'xml',
             error:function(json){
                    alert("not lived");
             },
              async: false ,
             success:function(xml){
                  
                 $(xml).find("facet").each(function(){
         
                      intNode += 1;
                      parentNode = intNode;
                     var facetName = $(this).attr("name");
                        tree.add(intNode, 0, facetName,'treetest.html');
                     var termValue;
                    var terms= $(this).find("term").each(function(){
                         intNode += 1;
                          termValue = $(this).text();
                         tree.add(intNode,parentNode,termValue,'treetest.html') ;
                    }) ;
                 });
             }
         });
      document.write(tree);
    </script>
</div>
</body>

</html>

 

4 启动服务

   打开连接 http://localhost:${端口号}/${项目名}/treetest.html

即便可以看到树形菜单效果

 

 

 

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

 

 

如下为一个静态代码树

  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> 

DTree的注意事项

   

一：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;//表格随着文字自动伸展（如果未设置TD宽度，则noWrap属性是起作用的；如果设置了TD宽度，则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;

}

 

二：tree.css

body {SCROLLBAR-FACE-COLOR:#D2FFD2;

SCROLLBAR-HIGHLIGHT-COLOR: #8AA583;

SCROLLBAR-SHADOW-COLOR: #8AA583;

SCROLLBAR-3DLIGHT-COLOR: #ffffff;

SCROLLBAR-ARROW-COLOR: #8AA583;

SCROLLBAR-TRACK-COLOR: #E1FFE1;

SCROLLBAR-DARKSHADOW-COLOR:  #ffffff;

       background-attachment: fixed;

//scroll : 　背景图像是随对象内容滚动

//fixed : 　背景图像固定

       background-repeat: no-repeat;

//background-repeat : repeat | no-repeat | repeat-x | repeat-y

//repeat : 　背景图像在纵向和横向上平铺

//no-repeat : 　背景图像不平铺

//repeat-x : 　背景图像在横向上平铺

//repeat-y : 　背景图像在纵向平铺

       background-color: EFF7F7;

}

 

 

 

2：dtree.js文件中
约87－113行是一些默认图片的路径，注意要指对。
 
二：页面中的书写
1：默认值的书写规则（从左至右，依次省略）
即 tree.add(id,pid,name,url);后面5个参数可以省略
2：有间隔时的默认值（如存在第6个参数，但第5个参数想用默认值）
即 tree.add(id,pid,name,url,"",target);必须这样写
其他 tree.add(id,pid,name,url,"","","","",true);
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>
说明：这是静态的代码，动态的可用循环加入。 

三：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;
}

<!-- --> 

 

分享到：
| cxf+spring
评论
2 楼 liulehua 2010-03-08  
感谢楼主详细的讲解，特别是提供了源代码的下载，我下载了你的源代码后在本机试验研究成功，特别高兴，再次感谢。
1 楼 mikyviky 2009-12-14  
谢谢楼主 为什么我运行您的程序 在ie浏览器下 树表 总是loading加载状态 火狐下面没问题呢？
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    dtree+jquery 动态实现无限树形菜单 （包括增删改查）

    本主题聚焦于使用dtree与jQuery库动态实现无限层级的树形菜单，并涵盖增删改查的基本功能。dtree是一款基于jQuery的插件，它提供了丰富的API和灵活的配置选项，使得在网页上创建交互式树形菜单变得简单易行。 首先...

    dtree+jquery动态生成树

    【dtree+jquery动态生成树】是一个用于创建交互式树形结构的JavaScript库，结合了jQuery框架的强大功能，使得在网页上动态展示层次结构数据变得简单。本实例着重于实现菜单树的生成，这对于构建多级导航系统尤其有用...

    Dtree+Jquery动态生成树节点.

    标题提到的"Dtree+Jquery动态生成树节点"是指使用DTree插件结合jQuery库来创建可交互的、动态更新的树形结构数据展示。这篇博文链接指向的是张荣（zhangrong108）在ITEYE上的博客文章，虽然具体的描述是空的，但我们...

    Dtree+Jquery动态生成树节点

    【Dtree+Jquery动态生成树节点】是一种常见的前端技术，尤其对于初学者来说，创建树形结构可能会显得有些复杂。Dtree结合Jquery库，能够简化这一过程，实现动态生成树状节点，使得数据组织和展示更加直观、便捷。 ...

    Dtree+Jquery 资料

    DTree通常是指一个JavaScript实现的可交互的树形菜单控件，而jQuery是一个广泛使用的JavaScript库，简化了DOM操作、事件处理和动画等功能。两者结合可以创建动态、交互性强的树状数据结构，适用于网站导航、文件目录...

    dtree+jquery动态树的生成(二)

    首先，dtree是一个JavaScript库，专门用于在网页上生成交互式的树形菜单。它提供了一种简单的方法，用HTML和CSS构建树结构，并通过JavaScript实现节点的展开、折叠、选择等动态效果。dtree的使用通常包括以下步骤：1...

    jquery整合dtree 动态加载树形结构，提高效率

    动态加载树形结构， 本人这段时间正巧要做一个省市县的树状结构图，公司之前用的dtree实现起来效率太低，半天打不开页面，于是考虑用jquery动态加载，通过网上查资料，学习别人的列子，现将本人所整理的树状结构...

    tree demo(dtree+jquery)

    DTree是一个专门用于创建JavaScript树形组件的库，它提供了丰富的API和事件处理，便于定制和扩展。而jQuery则是一个广泛使用的JavaScript库，简化了DOM操作、事件处理、动画以及Ajax交互，使得构建动态网页变得更加...

    dTree+JQuery右键菜单（增删改）

    在这个案例中，"dTree+JQuery右键菜单（增删改）"是一个结合了JavaScript库dTree和jQuery实现的功能增强，特别是针对树形结构数据的管理。dTree是一款轻量级的JavaScript库，用于创建交互式的树形菜单，而jQuery则是...

    jquery dtree 实例 动态实现无限树形菜单(增删改查）

    这个实例着重展示了如何利用jQuery dTree动态地构建一个无限层级的树形菜单，并实现基本的数据操作功能，包括添加、删除、修改和查询。下面我们将深入探讨这个主题。 首先，jQuery dTree是一个轻量级的插件，它基于...

    原始dtree+右键dtree+复选框dtree

    在这个话题中，我们将深入探讨三种特定的树形结构实现：原始dtree、右键dtree以及复选框dtree，这些都是在JavaScript环境下用于创建交互式树形菜单的工具。 首先，原始dtree是最基础的形式，它通常基于HTML、CSS和...

    dtree+右键菜单（超级简单实现）

    2. **初始化树形结构**：使用dtree库的API创建树形结构，通常涉及传入数据和配置项。 3. **事件监听**：为树形节点添加点击事件监听，以便在用户点击时执行相应的操作。 接下来，添加右键菜单功能，关键在于以下几...

    zTree+dtree+xtree

    dtree的特点在于简洁和易用，适合对性能要求不高，但需要快速实现树形结构的场景。尽管相对简单，dtree仍然提供了基本的展开/折叠节点、异步加载数据等功能。在压缩包中，你可以看到dtree的实例代码，帮助理解其工作...

    ssh+dtree+juqery+json+mysql数据库 两个实例

    dtree与jQuery结合使用，可以方便地实现用户界面的动态交互和动画效果。jQuery是一个强大的JavaScript库，简化了DOM操作、事件处理和Ajax请求。 MySQL是一个广泛使用的开源关系型数据库管理系统，以其高效、稳定和...

    dtree_JQuery实例.动态生成树

    动态生成树”这个项目是一个很好的学习资源，它展示了如何使用jQuery和dtree插件来创建具有动态加载和交互功能的树形结构。通过这个实例，开发者可以深入了解如何将静态HTML转化为生动的、响应式的用户界面元素，这...

    dtree树形代码案例

    动态生成树.rar**：可能是一个包含更多dtree与jQuery结合使用示例的压缩文件，特别是动态生成树形结构的示例。 7. **plupload.rar** 和 **plupload_1_5_2.zip**：这两个文件与plupload有关，plupload是一个多浏览器...

Magicbox
Global site tag (gtag.js) - Google Analytics