dtree+jquery动态生成树
1.先到网上下载dtree和jquery2.将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]