经过2周的努力，做个树，可添加删除修改拖曳-优快云博客

本文介绍了一个使用DWR、jQuery、Spring及Struts2技术实现的项目案例。该案例展示了如何通过这些技术来构建一个具备树形结构展示、右键菜单等功能的应用。文章详细列出了所需的JavaScript文件及其实现的基本功能。

大家看看

dwr+jqury1.2.6+spring+struts2

Java代码 <embed type="application/x-shockwave-flash" width="14" height="15" src="http://www.iteye.com/javascripts/syntaxhighlighter/clipboard_new.swf" flashvars="clipboard=%3C%25%40%20page%20language%3D%22java%22%20pageEncoding%3D%22utf-8%22%25%3E%0A%3C!DOCTYPE%20HTML%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20HTML%204.01%20Transitional%2F%2FEN%22%3E%0A%3Chtml%3E%0A%09%3Chead%3E%0A%09%09%3Ctitle%3E%3C%2Ftitle%3E%0A%09%09%3Clink%20rel%3D%22StyleSheet%22%20href%3D%22css%2Ftree2.css%22%20type%3D%22text%2Fcss%22%20%2F%3E%0A%09%09%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22dwr%2Fengine.js%22%3E%3C%2Fscript%3E%20%20%0A%09%20%20%20%20%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22dwr%2Futil.js%22%3E%3C%2Fscript%3E%20%20%0A%09%20%20%20%20%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22dwr%2Finterface%2FTreeService.js%22%3E%3C%2Fscript%3E%20%0A%09%20%20%20%20%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22js%2Ftree.js%22%3E%3C%2Fscript%3E%20%0A%09%20%20%20%20%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22js%2Fjquery-1.2.6.1.js%22%3E%3C%2Fscript%3E%0A%09%20%20%20%20%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22js%2Fjquery.contextmenu.r2.js%22%3E%3C%2Fscript%3E%0A%09%20%20%20%20%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22js%2Fjquery-impromptu.2.5.js%22%3E%3C%2Fscript%3E%0A%09%20%20%20%20%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22js%2Fjquery.timers.js%22%3E%3C%2Fscript%3E%0A%09%20%20%20%20%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22js%2Ftree.js%22%20charset%3D%22gb2312%22%3E%3C%2Fscript%3E%0A%09%20%20%20%20%3Cstyle%20type%3D%22%22%3E%0A%09%20%20%20%20%09.moveclass%20%7B%0A%09%09%09%09filter%3A%20Alpha(Opacity%3D50%2C%20Style%3D0)%3B%0A%09%09%09%09opacity%3A%200.50%3B%0A%09%09%09%09position%3A%20absolute%3B%0A%09%09%09%09z-index%3A%20100%3B%0A%09%09%09%7D%0A%09%20%20%20%20%3C%2Fstyle%3E%0A%09%3C%2Fhead%3E%0A%09%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%09%09(function%20()%7B%0A%09%09%09%09%2F%2F%E5%8A%A0%E8%BD%BD%E6%A0%B9%E8%8A%82%E7%82%B9%0A%09%09%09%09TreeService.getTreeByPidName(0%2C'%E6%A0%B9%E8%8A%82%E7%82%B9'%2C%7BexceptionHandler%3Afunction(msg)%7Balert(%22%E8%8F%9C%E5%8D%95%E4%B8%8D%E5%AD%98%E5%9C%A8%EF%BC%81%22)%3B%7D%2Ccallback%3AshowSub%7D)%3B%0A%09%09%7D)()%3B%0A%09%3C%2Fscript%3E%0A%09%0A%09%3Cbody%3E%0A%09%09%3C!--%E6%A0%91%E7%9A%84%E6%A0%B9%E8%8A%82%E7%82%B9--%3E%0A%09%09%3Cul%3E%0A%09%09%09%3Cli%3E%0A%09%09%09%09%3Cdiv%3E%3C%2Fdiv%3E%0A%09%09%09%3C%2Fli%3E%0A%09%09%3C%2Ful%3E%0A%09%09%0A%09%20%20%20%20%3C!--%E5%8F%B3%E9%94%AE%E8%8F%9C%E5%8D%95%E7%9A%84%E6%BA%90--%3E%0A%09%20%20%20%20%3Cdiv%20class%3D%22contextMenu%22%20id%3D%22rightMenu%22%3E%0A%09%20%20%20%20%20%20%3Cul%3E%0A%09%20%20%20%20%20%20%20%20%3Cli%20id%3D%22new%22%3E%3Cimg%20style%3D%22width%3A%2015%3Bheight%3A%2015%22%20src%3D%22images%2Fnew.jpg%22%2F%3E%20%E6%96%B0%20%20%E5%BB%BA%3C%2Fli%3E%0A%09%20%20%20%20%20%20%20%20%3Cli%20id%3D%22delete%22%3E%3Cimg%20style%3D%22width%3A%2015%3Bheight%3A%2015%22%20src%3D%22images%2Fdelete.jpg%22%20%2F%3E%20%E5%88%A0%20%20%E9%99%A4%3C%2Fli%3E%0A%09%20%20%20%20%20%20%20%20%3Cli%20id%3D%22edit%22%3E%3Cimg%20style%3D%22width%3A%2015%3Bheight%3A%2015%22%20src%3D%22images%2Fedit.jpg%22%20%2F%3E%20%E4%BF%AE%20%20%E6%94%B9%3C%2Fli%3E%0A%09%20%20%20%20%20%20%3C%2Ful%3E%0A%09%20%20%20%20%3C%2Fdiv%3E%0A%09%20%20%20%20%0A%09%20%20%20%20%3C!--%E8%A1%A8%E5%8D%95--%3E%0A%09%20%20%20%20%3Cform%20target%3D%22st2%22%3E%0A%09%09%09%3Cinput%20type%3D%22hidden%22%20name%3D%22id%22%3E%0A%09%09%3C%2Fform%3E%0A%09%09%0A%09%09%20%3C!--%E6%8B%96%E5%8A%A8%E8%8F%9C%E5%8D%95%E5%9F%9F--%3E%0A%09%09%3Cdiv%20id%3D%22moveId%22%20class%3D'moveclass'%20style%3D%22display%3A%20none%3B%22%3E%0A%09%09%3C%2Fdiv%3E%0A%09%3C%2Fbody%3E%0A%09%0A%3C%2Fhtml%3E%0A%0A%0A%0A%0A%0A%0A%0A" quality="high" allowscriptaccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

<%@ page language= "java" pageEncoding= "utf-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<title></title>
<link rel="StyleSheet" href= "css/tree2.css" type= "text/css" />
<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/TreeService.js" ></script>
<script type="text/javascript" src= "js/tree.js" ></script>
<script type="text/javascript" src= "js/jquery-1.2.6.1.js" ></script>
<script type="text/javascript" src= "js/jquery.contextmenu.r2.js" ></script>
<script type="text/javascript" src= "js/jquery-impromptu.2.5.js" ></script>
<script type="text/javascript" src= "js/jquery.timers.js" ></script>
<script type="text/javascript" src= "js/tree.js" charset= "gb2312" ></script>
<style type="" >
.moveclass {
filter: Alpha(Opacity=50 , Style= 0 );
opacity: 0.50 ;
position: absolute;
z-index: 100 ;
}
</style>
</head>
<script type="text/javascript" >
(function (){
//加载根节点
TreeService.getTreeByPidName(0 , '根节点' ,{exceptionHandler:function(msg){alert( "菜单不存在！" );},callback:showSub});
})();
</script>
<body>
<ul>
<li>
<div></div>
</li>
</ul>
<div class = "contextMenu" id= "rightMenu" >
<ul>
<li id="new" ><img style= "width: 15;height: 15" src= "images/new.jpg" /> 新建</li>
<li id="delete" ><img style= "width: 15;height: 15" src= "images/delete.jpg" /> 删除</li>
<li id="edit" ><img style= "width: 15;height: 15" src= "images/edit.jpg" /> 修改</li>
</ul>
</div>
<form target="st2" >
<input type="hidden" name= "id" >
</form>
<div id="moveId" class = 'moveclass' style= "display: none;" >
</div>
</body>
</html>