经过2周的努力,做个树,可添加删除修改拖曳

大家看看

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>
  1. <%@ page language= "java"  pageEncoding= "utf-8" %>  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >  
  3. <html>  
  4.     <head>  
  5.         <title></title>  
  6.         <link rel="StyleSheet"  href= "css/tree2.css"  type= "text/css"  />  
  7.         <script type="text/javascript"  src= "dwr/engine.js" ></script>    
  8.         <script type="text/javascript"  src= "dwr/util.js" ></script>    
  9.         <script type="text/javascript"  src= "dwr/interface/TreeService.js" ></script>   
  10.         <script type="text/javascript"  src= "js/tree.js" ></script>   
  11.         <script type="text/javascript"  src= "js/jquery-1.2.6.1.js" ></script>  
  12.         <script type="text/javascript"  src= "js/jquery.contextmenu.r2.js" ></script>  
  13.         <script type="text/javascript"  src= "js/jquery-impromptu.2.5.js" ></script>  
  14.         <script type="text/javascript"  src= "js/jquery.timers.js" ></script>  
  15.         <script type="text/javascript"  src= "js/tree.js"  charset= "gb2312" ></script>  
  16.         <style type="" >  
  17.             .moveclass {  
  18.                 filter: Alpha(Opacity=50 , Style= 0 );  
  19.                 opacity: 0.50 ;  
  20.                 position: absolute;  
  21.                 z-index: 100 ;  
  22.             }  
  23.         </style>  
  24.     </head>  
  25.     <script type="text/javascript" >  
  26.         (function (){  
  27.                 //加载根节点   
  28.                 TreeService.getTreeByPidName(0 , '根节点' ,{exceptionHandler:function(msg){alert( "菜单不存在!" );},callback:showSub});  
  29.         })();  
  30.     </script>  
  31.       
  32.     <body>  
  33.         <!--树的根节点-->  
  34.         <ul>  
  35.             <li>  
  36.                 <div></div>  
  37.             </li>  
  38.         </ul>  
  39.           
  40.         <!--右键菜单的源-->  
  41.         <div class = "contextMenu"  id= "rightMenu" >  
  42.           <ul>  
  43.             <li id="new" ><img style= "width: 15;height: 15"  src= "images/new.jpg" /> 新  建</li>  
  44.             <li id="delete" ><img style= "width: 15;height: 15"  src= "images/delete.jpg"  /> 删  除</li>  
  45.             <li id="edit" ><img style= "width: 15;height: 15"  src= "images/edit.jpg"  /> 修  改</li>  
  46.           </ul>  
  47.         </div>  
  48.           
  49.         <!--表单-->  
  50.         <form target="st2" >  
  51.             <input type="hidden"  name= "id" >  
  52.         </form>  
  53.           
  54.          <!--拖动菜单域-->  
  55.         <div id="moveId"   class = 'moveclass'  style= "display: none;" >  
  56.         </div>  
  57.     </body>  
  58.       
  59. </html> 

你可能感兴趣的:(JavaScript,spring,jquery,css,DWR)