2007-11-23

dhtmlxTree总结

最近有一个项目需要做到无限级树型菜单,而且要实现右键的功能,经别人的介绍,我接触到了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的字符串,发送到页面,有页面进行接收处理

在页面中的显示如下

js 代码
  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>   
  10.     tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);   
  11.     tree.setImagePath("../imgs/");   
  12.     tree.setXMLAutoLoading("http://localhost:8082/jh_directoryManager/tree/treeLoad.do?method=open");    
  13.     tree.loadXML("http://localhost:8082/jh_directoryManager/tree/treeLoad.do?method=init");   
  14.     tree.setOnRightClickHandler(viewRight);//设置右键调用方法   
  15.   
  16. </script>  

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

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

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

js 代码
  1. tree.setOnRightClickHandler(viewRight);//设置右键调用方法  

这是的意思是说当在树节点上点击右键的时候,会调用viewRight方法

因为在dhtmlxtree中定义右键菜单,我始终没有弄出来,所以最后放弃使用这个工具

好了,在帖下后台的代码,如下

java 代码
  1. /**  
  2.      * 初始化root表显示根节点使用dhtmlTree  
  3.      * @param mapping  
  4.      * @param form  
  5.      * @param request  
  6.      * @param response  
  7.      * @return  
  8.      */  
  9.     public ActionForward init(ActionMapping mapping, ActionForm form,   
  10.             HttpServletRequest request, HttpServletResponse response){   
  11.         FtpRootPathService ftpRootPathService = (FtpRootPathService)this.getWebApplicationContext().getBean("ftpRootPathService");     
  12.         OrganizationService organizationService = (OrganizationService)this.getWebApplicationContext().getBean("organizationService");   
  13. //      List list = organizationService.getRootOrgs();   
  14. //--- 测试数据开始       
  15.         List list = new ArrayList();   
  16. //      TreeBean bean = new TreeBean();   
  17. //      bean.setId("1");bean.setName("机构1");bean.setCount("10");   
  18. //      list.add(bean);   
  19. //      TreeBean bean2 = new TreeBean();   
  20. //      bean2.setId("2");bean2.setName("机构2");bean2.setCount("0");   
  21. //      list.add(bean2);   
  22. //      TreeBean bean4 = new TreeBean();   
  23. //      bean4.setId("3");bean4.setName("机构4");bean4.setCount("3");   
  24. //      list.add(bean4);   
  25. //--- 测试数据结束   
  26.         response.setContentType("text/xml;charset=UTF-8");   
  27.         response.setHeader("Cache-Control","no-cache");   
  28.         try {   
  29.             System.out.println(createDHTMLXML("0",list));    
  30.             response.getWriter().print(createDHTMLXML("0",list));//dhtmlxTree方式   
  31.         } catch (IOException e) {   
  32.             e.printStackTrace();   
  33.         }   
  34.         return null;   
  35.     }   
  36.     /**  
  37.      * 展开子节点处理  
  38.      * @param mapping  
  39.      * @param form  
  40.      * @param request  
  41.      * @param response  
  42.      * @return  
  43.      */  
  44.     public ActionForward open(ActionMapping mapping, ActionForm form,   
  45.             HttpServletRequest request, HttpServletResponse response){   
  46.         FtpRootPathService ftpRootPathService = (FtpRootPathService)this.getWebApplicationContext().getBean("ftpRootPathService");     
  47.         OrganizationService organizationService = (OrganizationService)this.getWebApplicationContext().getBean("organizationService");   
  48.         response.setContentType("text/xml;charset=UTF-8");   
  49.         response.setHeader("Cache-Control","no-cache");   
  50.            
  51.         String id = request.getParameter("id");   
  52.         //根据上一级节点,查询该节点下的所有节点及再下一级节点总个数   
  53.         List orgList = organizationService.getOrgChilds(id);   
  54.   
  55. //      StringBuffer sb = new StringBuffer();   
  56. //      sb.append("<?xml version='1.0' encoding='utf-8'?>\n");   
  57. //      sb.append("<tree id=\""+id+"\">\n");   
  58. //          for(int i=0;i<4;i++){   
  59. //              sb.append("<item text=\""+id+"_"+i+"\" id=\""+id+"_"+i+"\" im0=\"books_close.gif\" im1=\"tombs.gif\" im2=\"tombs.gif\" child=\"1\"></item>\n");   
  60. //          }   
  61. //      sb.append("</tree>");   
  62.         try {   
  63.             System.out.println(createDHTMLXML(id,orgList));   
  64.             response.getWriter().print(createDHTMLXML(id,orgList));   
  65.         } catch (IOException e) {   
  66.             e.printStackTrace();   
  67.         }   
  68.         return null;   
  69.     }   
  70.   
  71. /**  
  72.      * 生成dhtmlTree的xml文件  
  73.      * @param rootList  
  74.      * @return  
  75.      */  
  76.     public String createDHTMLXML(String id,List rootList){   
  77.         StringBuffer buffer = new StringBuffer();   
  78.         buffer.append("<?xml version='1.0' encoding='utf-8'?>\n<tree id=\""+id+"\">\n");   
  79.         for(int i=0;i<rootList.size();i++){   
  80.             TreeBean bean = (TreeBean)rootList.get(i);   
  81.             //添加主目录   
  82.             buffer.append("\t<item text=\""+bean.getName()+"\" id=\""+bean.getId()+"\" im0=\"books_close.gif\" im1=\"tombs.gif\" im2=\"tombs.gif\" ");   
  83.                 //判断是否有子节点,有的话,虚拟一个,强制页面显示有子节点样式   
  84.             if(!bean.getCount().equals("0")){   
  85.                 buffer.append(" child=\"1\"");   
  86.             }   
  87.             buffer.append(">\n");   
  88.             buffer.append("\t</item>\n");   
  89. //          buffer.append("<item text="+id+"_"+i+" id="+id+"_"+i+"  im0=\"books_close.gif\" im1=\"tombs.gif\" im2=\"tombs.gif\"></item>");   
  90.         }   
  91.         buffer.append("</tree> ");   
  92.         return buffer.toString();   
  93.     }  
结语:如果哪位高手在dhtmlxtree中加入了右键菜单,还望不吝赐教
评论
发表评论

您还没有登录，请登录后发表评论