首先下载 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 » Javascripts » 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文件中不能有重复的样式
如下为一个静态代码树
- <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>
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;
}
<!-- -->
分享到：
相关推荐
dtree+jquery 动态实现无限树形菜单 （包括增删改查） 好不容易，搞出来的，不容易啊
动态加载树形结构， 本人这段时间正巧要做一个省市县的树状结构图，公司之前用的dtree实现起来效率太低，半天打不开页面，于是考虑用jquery动态加载，通过网上查资料，学习别人的列子，现将本人所整理的树状结构...
jquery dtree 实例 无限树形菜单 实现增删改查
自己封装的三种树形结构，一种是原始dtree，第二种是dtree结合的jquery封装的右键dtree树，第三种修改的dtree源码复选框树形菜单，附件中都已经标注好了，欢迎大家使用。
dtree jquery 构建树形结构 树形代码案例
支持jquery和zepto的树形控件,基于Dtree
dtree在生成简单树方面比使用Jquery的treeView要方便，代码实现的是用户选择的树状结构图。
打包50种实例的大型树形菜单控件JSTree(基于jQuery)下载 30.打包两款实用jquery+div横向滑动的下滑菜单代码(兼容性好)下载 31.非常帅jquery仿雅虎网超大菜单导航代码 32.分享jquery带阴影效果折叠菜单dropdown...
树形控件的使用和jquery上传附件，其中树形控件配合数据库使用，该包包含数据库脚本和JDBC类 等所有操作
项目涉及技术： 1、前端：jsp、css、javascript、jQuery(js框架)、jQueryEasyUi(基于jQuery的前端框架)+BootStrap(前端框架)、...9、模块管理增加、修改、删除、分页查询、整合dTree树形插件 10、项目实现权限控制 1
1个目标文件，JNDI的使用例子，有源代码，可以下载参考，JNDI的使用，初始化Context,它是连接JNDI树的起始点，查找你要的对象，打印找到的对象，关闭Context…… ftp文件传输 2个目标文件，FTP的目标是：（1）提高...
1个目标文件，JNDI的使用例子，有源代码，可以下载参考，JNDI的使用，初始化Context,它是连接JNDI树的起始点，查找你要的对象，打印找到的对象，关闭Context…… ftp文件传输 2个目标文件，FTP的目标是：（1）提高...