使用dhtmltree动态生成树菜单总结

转载自http://cn-arthurs.iteye.com/blog/351456

我之前发布的dhtmltree总结因为页面问题，看起来很不爽，再次做一下更新，希望大家看起来更方便

 

最近有一个项目需要做到无限级树型菜单,而且要实现右键的功能,经别人的介绍,我接触到了dhtmlxtree,虽然最后并没有使用它,但是我想以后会有机会用的

在官方给出的例子中,加载一个xml文件很简单,文件内容如下

 

Xml代码  

1. <?xml version='1.0' encoding='utf-8'?>     
2. <tree id="0" text="root">     
3.     <item text="Books" id="books" im0="books_close.gif" im1="tombs.gif" im2="tombs.gif" src="http://www.baidu.com">     
4.         <item text="Mystery &amp; Thrillers" id="mystery" im0="book.gif" im1="books_open.gif" im2="books_close.gif">     
5.             <item text="Lawrence Block" id="lb" im0="book.gif" im1="books_open.gif" im2="book.gif">     
6.                 <item text="All the Flowers Are Dying" id="a1" im0="book_titel.gif" im1="book_titel.gif" im2="book_titel.gif"  child="1">     
7.                 </item>     
8.                 <item text="The Burglar on the Prowl" id="lb_2" im0="book_titel.gif" im1="book_titel.gif" im2="book_titel.gif"/>     
9.                 <item text="The Plot Thickens" id="lb_3" im0="book_titel.gif" im1="book_titel.gif" im2="book_titel.gif"/>     
10.                 <item text="Grifter's Game" id="lb_4" im0="book_titel.gif" im1="book_titel.gif" im2="book_titel.gif"/>     
11.                 <item text="The Burglar Who Thought He Was Bogart" id="lb_5" im0="book_titel.gif" im1="book_titel.gif" im2="book_titel.gif"/>     
12.             </item>     
13.         </item>     
14.     </item>     
15. </tree>  

 简单了解下,id就是这个节点ID,text是显示的内容,src是点击时的超链接,有了这个xml文件的结构之后,我们就可以通过页面发出请求访问后台,由后台生成类似的xml的字符串,发送到页面,有页面进行接收处理

在页面中的显示如下

Html代码  

1. <link rel="STYLESHEET" type="text/css" href="../css/dhtmlXTree.css">      
2.     <script src="../js/dhtmlXCommon.js"></script>      
3.     <script src="../js/dhtmlXTree.js"></script>      
4.      
5. ......      
6.      
7.      
8. <div id="treeboxbox_tree"></div>      
9. <script language="javascript">  
10.    tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);  
11.             tree.setImagePath("../../images/csh_bluebooks/");  
12.             tree.setXMLAutoLoading("tasklist.do");//如果不加的话就会不现实有下级菜单  
13.             tree.loadXML("tasklist.do?id=<%=id%>");  
14.  function tondblclick(id){  
15.     id=tree.getSelectedItemId();  
16.      
17.     //window.location="searchByStype.do?stype=id";    
18.     window.parent.main.location="taskright.do?id="+id;  
19. }  
20.   tree.setOnDblClickHandler(tondblclick);//设置tree的双击事件  
21.   function add(){  
22.     if(tree.getSelectedItemId()==""){  
23.         alert("请选中父任务进行添加");  
24.         return false;  
25.     }  
26.   
27.     window.parent.main.location="taskadd.do?id="+tree.getSelectedItemId();  
28. }  
29.  function update(){  
30.     if(tree.getSelectedItemId()==""){  
31.         alert("请选中任务进行修改");  
32.         return false;  
33.     }  
34.     window.parent.main.location="taskupdate.do?id="+tree.getSelectedItemId();  
35. }  
36.  function update1(){  
37.     if(tree.getSelectedItemId()==""){  
38.         alert("请选中任务进行修改");  
39.         return false;  
40.     }  
41.     window.parent.main.location="taskupdate1.do?id="+tree.getSelectedItemId();  
42. }  
43. function del(){  
44.     if(tree.getSelectedItemId()==""){  
45.         alert("请选中任务进行删除");  
46.         return false;  
47.     }  
48.     if(confirm('确定要删除吗?'))  
49.     {  
50.      window.parent.main.location="taskdel.do?id="+tree.getSelectedItemId();  
51.     }  
52. }  
53. function add1(){  
54.   
55.     window.parent.main.location="taskadd.do?id=<%=id%>";  
56. }  
57. function add2(id){  
58.     tree._xopenAll(tree._globalIdStorageFind(id));  
59. }  
60. function add3(id){  
61.     //tree.refreshItem(id); //刷新指定节点  
62.     window.location.reload();  
63. }  
64. function opentiems(itemId){  
65.     tree.openAllItems(0);  
66. }  
67. function cltime(){  
68.     tree.closeAllItems(0);  
69. }  
70.   
71.   
72. </script>  

 这里的tree.loadXML说的明白一点,就是页面第一次打开的时候,访问的请求

tree.setXMLAutoLoading是展开树发送的请求

大家还可以通过查看API定义一些事件处理如：

tree.setOnDblClickHandler(tondblclick);//设置tree的双击事件

台的代码如下：

 

 

Java代码  

1. public ModelAndView handleRequest(HttpServletRequest request,  
2.             HttpServletResponse response) throws Exception {  
3.         HttpSession session=request.getSession();  
4.         UserVo user=(UserVo)session.getAttribute("user");  
5.         String id =request.getParameter("id");  
6.   
7.         String[] ids=id.split("_");  
8.         String pid=ids[0];  
9.         String fid=ids[1];  
10.         response.setContentType("text/xml;charset=UTF-8");  
11.         response.setHeader("Cache-Control","no-cache");  
12.         StringBuffer sb = new StringBuffer();  
13.         sb.append("<?xml version='1.0' encoding='utf-8'?>\n");  
14.         if(fid.equals("0"))  
15.         {  
16.             id="0";  
17.         }  
18.         sb.append("<tree id=\""+id+"\">\n");  
19.         List list = projectService.gettreexml(pid, fid);  
20.           
21.         for(int i=0;i<list.size();i++){  
22.               
23.             PmenuVo bean = (PmenuVo)list.get(i);  
24.               
25.             sb.append("\t<item");  
26.             if(!bean.getSum().equals("0")){  
27.                 sb.append(" child='1' open ='1'");  
28.             }  
29.             String id11=pid+"_"+bean.getId();  
30.               
31.             sb.append(" id='"+id11+"' text='"+bean.getTaskname().trim()+"'>\n");  
32.               
33.             sb.append("\t</item>\n");  
34.               
35.         }  
36.         sb.append("</tree> ");  
37.             try {  
38.                 response.getWriter().print(sb.toString());  
39.             } catch (IOException e) {  
40.                 e.printStackTrace();  
41.             }  
42.               
43.         return null;  
44.     }