dtree+jquery动态生成树

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

评论

1 楼 赤道螞蟻 2010-03-04  

爲什麽我這老是報 tree未定義呢  路勁什麽都是對的 畫面也能出來就是js報錯