最近在搞的系统需要一个完整的用户、角色、权限对应关系的设置，而权限都是根据系统目录结构的菜单来设定的，所以在角色中选权限时，把权限做成一个树结构直接在树的节点上用多选框来勾选，用户体验会好很多。其实树结构还可能会用在很多地方，比如：公司的组织机构、省市镇行政等层级分明的地方。
    在比较过几个树结构控件之后，我发现dhtmlxtree比较符合我的需求：一方面是它提供我需要的多选框，一方面是它提供丰富的UI可供选择，还有一方面是它支持右击子节点进行操作，虽然这个功能我还没有用到，但是为以后的扩展提供了方便。

一、采用dhtmlxtree将树结构显示到页面上

首先我们来看一下我的效果图：
基于dhtmlxtree的树结构组件_第1张图片 
在上图中就是根据我自定义的XML所生成的树结构，右边三个按钮分别是选中当前节点及其子节点、取消选中当前节点及其子节点、获取所选节点id。

下面我们来看一下这个显示的jsp页面：

   
   
   
   
    
    
    
    
    
  1. <%@ page language="java" contentType="text/html; charset=UTF-8" 
    2. 
    
    
    
    
  2.     pageEncoding="UTF-8"%> 
    3. 
    
    
    
    
  3. <%@taglib prefix="s" uri="/struts-tags"%> 
    4. 
    
    
    
    
  4. <%  
    5. 
    
    
    
    
  5.     String base = request.getScheme() + "://" + request.getServerName()  
    6. 
    
    
    
    
  6.             + ":" + request.getServerPort() + request.getContextPath()  
    7. 
    
    
    
    
  7.             + "/";  
    8. 
    
    
    
    
  8. %> 
    9. 
    
    
    
    
  9. > 
    10. 
    
    
    
    
  10. <html> 
    11. 
    
    
    
    
  11. <head> 
    12. 
    
    
    
    
  12. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    13. 
    
    
    
    
  13. <title>树结构title> 
    14. 
    
    
    
    
  14. <link href="<%=base%>page/Public/p_w_picpaths/main.css" rel="stylesheet" 
    15. 
    
    
    
    
  15.     type="text/css" /> 
    16. 
    
    
    
    
  16. <script src="<%=base%>js/jquery-1.7.2.js" type="text/javascript">script> 
    17. 
    
    
    
    
  17. <link rel="STYLESHEET" type="text/css" href="<%=base%>tree/codebase/dhtmlxtree.css"> 
    18. 
    
    
    
    
  18. <script  src="<%=base%>tree/codebase/dhtmlxcommon.js">script> 
    19. 
    
    
    
    
  19. <script  src="<%=base%>tree/codebase/dhtmlxtree.js">script> 
    20. 
    
    
    
    
  20. head> 
    21. 
    
    
    
    
  21. <body> 
    22. 
    
    
    
    
  22. <table> 
    23. 
    
    
    
    
  23.     <tr> 
    24. 
    
    
    
    
  24.         <td valign="top"> 
    25. 
    
    
    
    
  25.             <div id="treeboxbox_tree2" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;">div> 
    26. 
    
    
    
    
  26.         td> 
    27. 
    
    
    
    
  27.         <td  style="padding-left:25" valign="top"> 
    28. 
    
    
    
    
  28.             Three state checkboxes<br> 
    29. 
    
    
    
    
  29.             <br> 
    30. 
    
    
    
    
  30.         <a href="javascript:void(0);" onClick="tree2.setCheck(tree2.getSelectedItemId(),true);">Check itema><br><br> 
    31. 
    
    
    
    
  31.         <a href="javascript:void(0);" onClick="tree2.setCheck(tree2.getSelectedItemId(),false);">UnCheck itema><br><br> 
    32. 
    
    
    
    
  32.         <a href="javascript:void(0);" onClick="alert(tree2.getAllChecked());">Get list of checkeda><br><br> 
    33. 
    
    
    
    
  33.         td> 
    34. 
    
    
    
    
  34.     tr> 
    35. 
    
    
    
    
  35. table> 
    36. 
    
    
    
    
  36. <script> 
    37. 
    
    
    
    
  37. //新建一个dhtmlXTreeObject对象，将树呈现在id为treeboxbox_tree2的div中  
    38. 
    
    
    
    
  38. tree2 = new dhtmlXTreeObject("treeboxbox_tree2", "100%", "100%", 0);  
    39. 
    
    
    
    
  39. //设置树的皮肤  
    40. 
    
    
    
    
  40. tree2.setSkin('dhx_skyblue');  
    41. 
    
    
    
    
  41. //设置树的UI图片存放地址  
    42. 
    
    
    
    
  42. tree2.setImagePath("<%=base%>tree/codebase/imgs/csh_bluebooks/");  
    43. 
    
    
    
    
  43. //子节点前是否需要多选框  
    44. 
    
    
    
    
  44. tree2.enableCheckBoxes(1);  
    45. 
    
    
    
    
  45. tree2.enableThreeStateCheckboxes(true);  
    46. 
    
    
    
    
  46. //这一步是最重要的，设定加载那个XML下的树结构  
    47. 
    
    
    
    
  47. tree2.loadXML("<%=base%>tree/sample/common/right.xml");  
    48. 
    
    
    
    
  48. script> 
    49. 
    
    
    
    
  49. body> 
    50. 
    
    
    
    
  50. html> 
    51.

下面我们来看一下自定义生成的right.xml：

   
   
   
   
    
    
    
    
    
  1. xml version="1.0" encoding="UTF-8"?> 
    2. 
    
    
    
    
  2. <tree id="0"> 
    3. 
    
    
    
    
  3. <item call="1" id="21" im0="tombs.gif" im1="tombs.gif" im2="iconSafe.gif" open="1" select="1" text="系统维护"> 
    4. 
    
    
    
    
  4. <item id="23" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="流程模块"> 
    5. 
    
    
    
    
  5. <item id="30" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="添加流程"/> 
    6. 
    
    
    
    
  6. <item id="31" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="编辑流程"/> 
    7. 
    
    
    
    
  7. <item id="32" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="删除流程"/> 
    8. 
    
    
    
    
  8. item> 
    9. 
    
    
    
    
  9. <item id="24" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="权限管理"> 
    10. 
    
    
    
    
  10. <item id="33" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="添加权限"/> 
    11. 
    
    
    
    
  11. <item id="34" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="编辑权限"/> 
    12. 
    
    
    
    
  12. <item id="35" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="删除权限"/> 
    13. 
    
    
    
    
  13. item> 
    14. 
    
    
    
    
  14. <item id="25" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="角色管理"> 
    15. 
    
    
    
    
  15. <item id="36" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="添加角色"/> 
    16. 
    
    
    
    
  16. <item id="37" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="编辑角色"/> 
    17. 
    
    
    
    
  17. <item id="38" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="删除角色"/> 
    18. 
    
    
    
    
  18. item> 
    19. 
    
    
    
    
  19. <item id="26" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="用户模块"> 
    20. 
    
    
    
    
  20. <item id="39" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="添加用户"/> 
    21. 
    
    
    
    
  21. <item id="40" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="编辑用户"/> 
    22. 
    
    
    
    
  22. <item id="41" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="删除用户"/> 
    23. 
    
    
    
    
  23. item> 
    24. 
    
    
    
    
  24. item> 
    25. 
    
    
    
    
  25. <item call="1" id="22" im0="tombs.gif" im1="tombs.gif" im2="iconSafe.gif" open="1" select="1" text="物料数据库"> 
    26. 
    
    
    
    
  26. <item id="27" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="供应商管理"> 
    27. 
    
    
    
    
  27. <item id="42" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="添加供应商"/> 
    28. 
    
    
    
    
  28. <item id="43" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="编辑供应商"/> 
    29. 
    
    
    
    
  29. <item id="44" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="删除供应商"/> 
    30. 
    
    
    
    
  30. <item id="45" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="供应商查询"/> 
    31. 
    
    
    
    
  31. <item id="46" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="供应商变更"/> 
    32. 
    
    
    
    
  32. item> 
    33. 
    
    
    
    
  33. <item id="28" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="物料管理"> 
    34. 
    
    
    
    
  34. <item id="47" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="添加物料"/> 
    35. 
    
    
    
    
  35. <item id="48" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="编辑物料"/> 
    36. 
    
    
    
    
  36. <item id="49" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="删除物料"/> 
    37. 
    
    
    
    
  37. <item id="50" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="物料查询"/> 
    38. 
    
    
    
    
  38. <item id="51" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="物料申请"/> 
    39. 
    
    
    
    
  39. <item id="52" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="物料变更"/> 
    40. 
    
    
    
    
  40. item> 
    41. 
    
    
    
    
  41. <item id="29" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="BOM管理"> 
    42. 
    
    
    
    
  42. <item id="53" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="添加BOM"/> 
    43. 
    
    
    
    
  43. <item id="54" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="编辑BOM"/> 
    44. 
    
    
    
    
  44. <item id="55" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="删除BOM"/> 
    45. 
    
    
    
    
  45. <item id="56" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="BOM变更"/> 
    46. 
    
    
    
    
  46. <item id="57" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="BOM查询"/> 
    47. 
    
    
    
    
  47. <item id="58" im0="book_titel.gif" im1="book.gif" im2="book_titel.gif" text="BOM导入"/> 
    48. 
    
    
    
    
  48. item> 
    49. 
    
    
    
    
  49. item> 
    50. 
    
    
    
    
  50. <item call="1" id="59" im0="tombs.gif" im1="tombs.gif" im2="iconSafe.gif" open="1" select="1" text="生产管理"/> 
    51. 
    
    
    
    
  51. <item call="1" id="60" im0="tombs.gif" im1="tombs.gif" im2="iconSafe.gif" open="1" select="1" text="维修管理"/> 
    52. 
    
    
    
    
  52. <item call="1" id="61" im0="tombs.gif" im1="tombs.gif" im2="iconSafe.gif" open="1" select="1" text="字典管理"/> 
    53. 
    
    
    
    
  53. tree> 
    54.

到这里我们就知道了页面显示一棵树就这么简单，只要在页面导入dhtmlxtree.css、dhtmlxcommon.js、dhtmlxtree.js三个文件，然后在写一段设置的js
剩下的最关键的就是怎么生成这个用于存储树节点的XML了

二、dhtmlxtree树结构XML的生成（权限树生成）

    我的需求是要根据权限的添加来增加树的子节点，而权限其实就是我系统的目录，而目录的层次不定，所以在设计数据库时需要设计为多层结构。
    首先让我们来看一下权限的数据库构造

id ishaveson parentid rightid rightname memo
20 0   0 root root
21 0 0 1000 系统维护 系统维护 一级模块权限
22 0 0 2000 物料数据库 物料数据库模块 一级模块权限
23 0 1000 1100 流程模块 流程模块 二级模块权限
24 0 1000 1200 权限管理 权限管理 二级权限模块
25 0 1000 1300 角色管理 角色管理 二级权限模块

 

以上是从数据库中取出的几条数据，其中第一行为字段名，其中比较重要的两个字段是rightid和parentid，分别代表权限编码和父节点编码，ishaveson是是否允许有子节点。

要生成一棵多层的树的原理：
1、采用遍历循环，首先是第一条数据根节点，rightid为0，写入XML，作为根节点
2、然后我们就查询所有parentid为0的权限数据，然后遍历，设此级数据为二级菜单
3、遍历每一条二级菜单时，先将该条数据写入XML，
4、然后查询出所有parentid为该数据的rightid时，然后遍历三级菜单，
5、无限循环，知道该二级菜单的每一个子孙菜单都写入XML后，遍历下一个二级菜单
6、整个遍历完之后就得到了我们的right.xml

下面是循环遍历写入XML的方法，其中RightXML为自定义读写XML方法。

   
   
   
   
    
    
    
    
    
  1. /**  
    2. 
    
    
    
    
  2.  *   
    3. 
    
    
    
    
  3.  * @brief 根据数据库中的right重建xml  
    4. 
    
    
    
    
  4.  *  
    5. 
    
    
    
    
  5.  */ 
    6. 
    
    
    
    
  6. public void createXML(){  
    7. 
    
    
    
    
  7.     try {  
    8. 
    
    
    
    
  8.         String basepath = ServletActionContext.getServletContext().getRealPath("/");  
    9. 
    
    
    
    
  9.         System.out.println("basepath:"+basepath);  
    10. 
    
    
    
    
  10.         RightXML myxml = new RightXML(basepath+"/"+"tree/sample/common/right.xml");  
    11. 
    
    
    
    
  11.         Element root = myxml.writeRoot();  
    12. 
    
    
    
    
  12.           
    13. 
    
    
    
    
  13.         Right pright = new Right();  
    14. 
    
    
    
    
  14.         pright.setParentid("0");  
    15. 
    
    
    
    
  15.         //获取父节点为0的子节点  
    16. 
    
    
    
    
  16.         List rlist = entityService.get(pright);  
    17. 
    
    
    
    
  17.         if(rlist != null && rlist.size()>0 ){  
    18. 
    
    
    
    
  18.             for(Right right1:rlist){  
    19. 
    
    
    
    
  19.                 //写入第一层的权限  
    20. 
    
    
    
    
  20.                 Element son = myxml.writeSon(root, right1);  
    21. 
    
    
    
    
  21.                 Right pright1 = new Right();  
    22. 
    
    
    
    
  22.                 pright1.setParentid(right1.getRightid());  
    23. 
    
    
    
    
  23.                 //查询第二层的权限列表  
    24. 
    
    
    
    
  24.                 List rlist2 = entityService.get(pright1);  
    25. 
    
    
    
    
  25.                 if(rlist2 != null && rlist2.size()>0 ){  
    26. 
    
    
    
    
  26.                 //循环添加直至到树叶  
    27. 
    
    
    
    
  27.                 addChild(rlist2,myxml,son);  
    28. 
    
    
    
    
  28.                 }  
    29. 
    
    
    
    
  29.             }  
    30. 
    
    
    
    
  30.         }  
    31. 
    
    
    
    
  31.         //保存XML  
    32. 
    
    
    
    
  32.         myxml.toSave();  
    33. 
    
    
    
    
  33.     } catch (ParserConfigurationException e) {  
    34. 
    
    
    
    
  34.         // TODO Auto-generated catch block  
    35. 
    
    
    
    
  35.         e.printStackTrace();  
    36. 
    
    
    
    
  36.     }  
    37. 
    
    
    
    
  37. }  
    38. 
    
    
    
    
  38.  
    39. 
    
    
    
    
  39. /**  
    40. 
    
    
    
    
  40.  *   
    41. 
    
    
    
    
  41.  * @brief 循环遍历读入子节点  
    42. 
    
    
    
    
  42.  *  
    43. 
    
    
    
    
  43.  * @param rlist 某节点的子节点list  
    44. 
    
    
    
    
  44.  * @param myxml 自定义读写XMl方法  
    45. 
    
    
    
    
  45.  * @param parent 父节点  
    46. 
    
    
    
    
  46.  */ 
    47. 
    
    
    
    
  47. public void addChild(List rlist,RightXML myxml,Element parent){  
    48. 
    
    
    
    
  48.     //如果rlist不为空则一直循环下去  
    49. 
    
    
    
    
  49.     if(rlist != null && rlist.size()>0 ){  
    50. 
    
    
    
    
  50.         //遍历循环子节点  
    51. 
    
    
    
    
  51.         for(Right right:rlist){  
    52. 
    
    
    
    
  52.             Right pright = new Right();  
    53. 
    
    
    
    
  53.             pright.setParentid(right.getRightid());  
    54. 
    
    
    
    
  54.             //获取该子节点的所有子节点  
    55. 
    
    
    
    
  55.             List rlist1 = entityService.get(pright);  
    56. 
    
    
    
    
  56.             //继续遍历循环  
    57. 
    
    
    
    
  57.             addChild(rlist1,myxml,myxml.writeSon2(parent, right));  
    58. 
    
    
    
    
  58.         }  
    59. 
    
    
    
    
  59.     }  
    60. 
    
    
    
    
  60. } 
    61.

三、角色选择权限树的处理

在角色选择权限并添加成功后，我们需要显示已选的权限，这时，我是这样处理的，我将right.xml拷贝一份，然后遍历那些选中的权限的id，然后将XML中id为此id的节点添加 select="1" 属性，然后重新生成一个名为此角色名的xml，这样需要显示时只需要在js中将要显示树的xml设置为此角色名的xml。

具体代码我就不在这里贴了，附件附上简单树显示的代码。

下面是官方网站的地址及API地址：

dhtmlxtree官方网站地址 http://dhtmlx.com/docs/products/dhtmlxTree/
dhtmlxtree官网API  http://docs.dhtmlx.com/doku.php?id=dhtmlxtree:api_toc_alpha