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 οnlοad="initTree()">
<div id="mytree">
</div>
</body>
</html>
这里在页面上导入了dwr框架提供的js脚本，在页面上放置一个层。用来显示dtree的内容。用dwr调用后台的业务方法，得到dtree的数据。
在回调方法中对dtree进行初始化。最后将dtree显示在层里面。结果如图所示:
大家可以把这个例子进行扩展，比如可以在dtree的表中加入角色字段，根据登录人员的不同角色，显示不同的树形菜单。或者可以实现一个无刷新的动态删除、更新、添加树形菜单的效果。
663
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
