dTree+jquery实现树形结构

最新推荐文章于 2024-11-17 11:20:07 发布

原创最新推荐文章于 2024-11-17 11:20:07 发布 · 289 阅读

CC 4.0 BY-SA版权

文章标签：

#数据结构 #jQuery #Servlet #XML #CSS #ViewUI

首先下载 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>