dTree+jquery实现树形结构

zkliqiang

浏览: 244983 次
性别:
来自: 北京

最近访客更多访客>>

as13415

老友记

ljr1982

fantadust

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

数据结构 jQuery Servlet XML CSS

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

分享到：