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
分享到:
相关推荐
对于初级开发人员 做树是件很头疼的事情 介绍一个使用的方法 Dtree+Jquery动态生成树节点
NULL 博文链接:https://zhangrong108.iteye.com/blog/618122
基于图形化对于动态树的菜单进行管理,本工程基于ssh框架,实例来源于网上,经过修改,从网上来,到网上去。 基于oracle数据库,新建表,导入工程,即可运行
dtreeJQuery实例.动态生成树dtreeJQuery实例.动态生成树
dtree_JQuery实例.动态生成树
用jquery的插件dtree构建生成树的实例,非常详细,根据项目需要的不同,共总结了8种,任你挑选。
dtree 增加删除修改功能 自测可用. dtree_JQuery实例.动态生成树
dtree在生成简单树方面比使用Jquery的treeView要方便,代码实现的是用户选择的树状结构图。
使用纯java代码遍历文件夹,生成一个文件夹目录结构的目录树。 及返回一个包含有 id(文件夹id) fid(当前文件夹父目录文件夹id) name...可根据这个结果传到前台,通过jquery.ztree 或是dtree 直接生成文件夹结构的目录树
同时会涉及到jQuery Ajax、XML、jQuery插件 、Dtree递归树\WebChart高级图表统计图\Excel导出复杂报表打印\CodeSmith\图片水印\防盗链\WebService\面向对象的建模、分析、设计和实施方法,掌握第三方控件技术和报表...
使用纯Java代码实现数据加密,DESede加密 及返回一个包含有 key(加密) fid(当前文件) name (文件/文件夹路径)的集合对象。可根据这个结果传到前台,通过jquery.ztree 或是dtree 直接生成文件夹结构的目录树
1个目标文件,JNDI的使用例子,有源代码,可以下载参考,JNDI的使用,初始化Context,它是连接JNDI树的起始点,查找你要的对象,打印找到的对象,关闭Context…… ftp文件传输 2个目标文件,FTP的目标是:(1)提高...
1个目标文件,JNDI的使用例子,有源代码,可以下载参考,JNDI的使用,初始化Context,它是连接JNDI树的起始点,查找你要的对象,打印找到的对象,关闭Context…… ftp文件传输 2个目标文件,FTP的目标是:(1)提高...