dtree+jquery动态生成树

animalfishyu

1.先到网上下载dtree和jquery
2.将dtree.css,dtree.js,一个img文件夹导入,css文件里面有dtree生成树的样式,js文件里面有我们会使用到的dtree的方法,img文件夹里面发的是生成树时的一些显示图片
3.导入jquery.js
4.编写一个servlet类，并且将其配置在web.xml中代码具体如下
  package org.hd.hrms.createTree;import java.io.*;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class PopedomServlet extends HttpServlet {public void init() throws ServletException {}public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("utf-8");response.setContentType("text/xml;charset=utf-8");PrintWriter pw = response.getWriter();pw.println("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");pw.println("<nodes>");pw.println("<node nodeId='0' parentId='-1'>微普信息管理系统</node>");pw.println("<node nodeId='1' parentId='0'>新闻模块</node>");pw.println("<node nodeId='10' parentId='1'>新闻浏览</node>");pw.println("<node nodeId='11' parentId='1'>新闻管理</node>");pw.println("<node nodeId='2' parentId='0'>员工模块</node>");pw.println("<node nodeId='3' parentId='0'>部门模块</node>");pw.println("</nodes>");}}
在web.xml中的配置 <servlet-name>PopedomServlet</servlet-name>    <servlet-class>org.hd.hrms.createTree.PopedomServlet</servlet-class>    <load-on-startup>1</load-on-startup> <servlet-mapping>    <servlet-name>PopedomServlet</servlet-name>    <url-pattern>/popedom</url-pattern>  </servlet-mapping>  </servlet>
这里该servlet向页面打印了一个xml文件，jquery可以解析该xml文件
5.在jsp页面嵌入js代码
<link rel="stylesheet" href="dtree.css" type="text/css"></link>           <script type="text/javascript" src="dtree.js"></script>           <script type="text/javascript" src="jquery.js"></script> 先导入相关文件
<script type="text/javascript">                tree = new dTree('tree');//创建一个对象.      $.ajax({        url:'../popedom',        type:'post', //数据发送方式        dataType:'xml', //接受数据格式        error:function(json){                alert( "not lived!");          },       async: false ,//同步方式       success: function(xml){            $(xml).find("node").each(function(){            var nodeId=$(this).attr("nodeId");             var parentId=$(this).attr("parentId");             var nodeName=$(this).text();            tree.add(nodeId,parentId,nodeName,"","","workspace","","",false);                           });              }        });           document.write(tree);                   </script>
这里对tree.add()参数说明一下：第一个是自己的id号，第二个是父节点id号，第三个是显示的名字，第四个是点击该节点具体的请求，第五个提示语，第六个在那个目标窗口显示，第七个关闭时的显示图标，第八个是打开时显示的图标，第九个默认的打开状态, true打开, false关闭


最后上传dtree和jquery