使用DWR+Dtree实现无刷新树形菜单

Java中ajax的框架DWR用来实现ajax效果比较方便,Dtree是用js实现的树形菜单,传统办法是在页面上使用java代码来构造Dtree树。
我们可以动脑筋利用Dwr的ajax效果结合Dtree来实现树形菜单效果

首先在项目中加入环境支持,dwr.jar,并编写好配置文件dwr.xml
片段如下:
<dwr>
<allow>
<create javascript="DtreeService" creator="spring">
<param name="beanName" value="dtreeService"></param>
</create>
<convert match="com.svse.entity.Dtree" converter="bean">
</convert>
</allow>
</dwr>

注意该配置文件是Dwr和spring整合的环境下配置的
如果不使用spring 那么 creator 应改为new, param改为
<param name="class" value="类路径">
这里编写了一个业务类,负责查询Dtree表中所有的节点数据

最后别忘了在web.xml中加入dwr的环境配置
<servlet>
<servlet-name>dwr</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>dwr</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>

当准备完成后,就可以编写页面的代码了,下面是tree.jsp的代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<script type="text/javascript" src="dtree/dtree.js"></script>
<script type="text/javascript" src="dwr/engine.js"></script>
<script type="text/javascript" src="dwr/util.js"></script>
<script type="text/javascript" src="dwr/interface/DtreeService.js"></script>
<link rel="stylesheet" type="text/css" href="dtree/dtree.css">
<script type="text/javascript">
d = new dTree('d');
//初始化Dtree
function initTree(){
//调用后台业务方法
DtreeService.findTreeByRoleId(${param.roleid},callback);
}
function callback(data){
//对dtree树进行初始化
d.add(0,-1,'后台管理');
for(var i = 0;i<data.length;i++){
d.add(data[i].id,data[i].pid,data[i].name,data[i].url,'',data[i].target,data[i].icon);
}
//将树形菜单显示在层里面
document.getElementById('mytree').innerHTML=d;
}
</script>
</head>
<body onload="initTree()">
<div id="mytree">
</div>
</body>
</html>
这里在页面上导入了dwr框架提供的js脚本,在页面上放置一个层。用来显示dtree的内容。用dwr调用后台的业务方法,得到dtree的数据。
在回调方法中对dtree进行初始化。最后将dtree显示在层里面。结果如图所示:

大家可以把这个例子进行扩展,比如可以在dtree的表中加入角色字段,根据登录人员的不同角色,显示不同的树形菜单。或者可以实现一个无刷新的动态删除、更新、添加树形菜单的效果。

相关文章

$.AJAX()方法中的PROCESSDATA参数 在使用jQuery的$.ajax()方...
form表单提交的几种方式 表单提交方式一:直接利用form表单提...
文章浏览阅读1.3k次。AJAX的无刷新机制使得在注册系统中对于...
文章浏览阅读1.2k次。 本文将解释如何使用AJAX和JSON分析器在...
文章浏览阅读2.2k次。/************************** 创建XML...
文章浏览阅读3.7k次。在ajax应用中,通常一个页面要同时发送...