dTree+jquery实现动态树形
首先下载 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;
}
<link href="/jingjindatabase/pub/css/dtree.css" rel="stylesheet" type="text/css" />
<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("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("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;
}
<!-- -->