二话不说，先看看效果图：

 

1、先来看写死的：

展开前~~

展开后~~

 怎么实现呢？

先new 一个jsp文件，导入几个包，编写html代码，编写js代码，一个文件搞定！

1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 2  3  4  5 
      6  7  8  9 
     10 
     11 22 23 24     
     
      25     
      
         26         
           27              
 28              
 29              
  31          
           32              
 33              
 34              
  36          
           37              
38              
  39              
  41          
           42              
  43              
 44              
  46          
           47              
  48              
 49               
  51     
       
        
         
名字
         
URL
         
操作
         
30          
        
        
         
a
         
a.jsp
         
edit 
         
35          
        
        
         
a1
         
a1.jsp
         
edit 
         
40          
        
        
         
b
         
b.jsp
         
edit 
         
45          
        
        
         
b1
         
b1.jsp
         
edit 
         
50          
        
       
      
  52     
     
53 54 

把上面代码拷回去试试？记得导treetable的包。

 

 

2、有了上面的基础，再来看连数据库的，可动态扩展（推荐），但是相对麻烦一点。

效果图：

数据库模型是这样的：

字段解释：nodeId就是节点的id。pid是 parentId也就是父亲的id（注意：最根的节点的pid会和代码耦合，或做好约定——代码总要根据什么字符来找到最根节点），表示该节点是哪个节点的子节点。type=1代表功能，type=0代表菜单。level代表该节点在树的第几层。

我做了什么工作呢？

简单解释一下，就是通过查数据库，把上面的数据查出来，每一行数据封装成为一个节点，然后拼成一颗树，然后对树进行“中序遍历”，按“中序遍历“的顺序把每一个节点添加到list，最后显示在前台（有点绕，下面解释为什么这样做。因为是多叉树，中序遍历我打了引号）。注意：这里的数据是可以动态扩展的。

数据库查出来的数据本来就是一个list，我把这个list的数据封装成为一个节点，然后拼成一颗树，然后又把这颗树按中序的遍历顺序转化成了list。

看似多余，其实这是由于treetable这个插件构建树的时候是根据html的table里面定义的tr来构建的，具体可观察上面写死的那个例子。而它对tr定义的顺序也有要求（有兴趣可在自己机器上调换一下tr的顺序，看看效果）。

在这个前提下，试想：传会前台的数据要怎么解析？传回来的数据毫无疑问是json数据，是用list结构的还是tree结构的？

其实都可以。如果是tree结构的（可见我另外一个例子：http://www.cnblogs.com/chenhtblog/p/8342534.html），前台一样需要对这一棵树进行“中序遍历“，按这个顺序把每一个节点生成一个tr。这里我是在后台处理了业务逻辑，传回来的是“中序遍历“后的list。

OK，大家应该迫不及待想要知道具体实现了.....

满足大家，先来看前端代码：

1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 2  3  4  5 
      6  7 <% 8     String server_path = request.getContextPath(); 9 %>10 11 12 
     13 
     14 36 37 38     
     
        39         
          40              
 41              
 42              
43          
  44     
      
       
        
名字
        
URL
        
操作
       
      
     
  45 46 47 

注意：上面用了ajax的异步请求，要把$("#treeTable").treetable();方法写在success域里面，因为要重新生成table，必须要先有数据，然后才能生成！！！

控制器(springMVC)代码：

@RequestMapping("reslist")    public void getReslist(HttpServletRequest request,HttpServletResponse response) throws Exception{        json.setResult("no");//返回前台的json数据        Node tree = getTreeJson();//获得树形结构的json数据        Node n = tree.zxPraseTree(tree);//把树形结构数据按中序遍历顺序，加入list        List
     
       reslist = n.getNodes();//获得上面的list        List
      
        list = new ArrayList
       
        ();        for(Node node : reslist) {//去掉null节点            if(null != node) {                if(node.getNodeId() != null) {                    list.add(node);                }            }        }        json.setData(list);//设置，返回到前台        json.setResult("ok");        response.getWriter().println(mapper.writeValueAsString(json));    }     public Node getTreeJson() {         List
        
          reslist = resourceService.loadAll();//从数据库加载所有数据，得到list         List
         
           nodes = new ArrayList
          
           (); for(Resource res : reslist){ Node node = new Node(); node.setHref(res.getUrl()); node.setIcon(res.getIcon()); node.setNodeId(res.getNodeId()); node.setPid(res.getPid()); node.setText(res.getName()); nodes.add(node); } Node tree = new Node(); Node mt = tree.createTree(nodes);//把list转化成tree System.out.println(tree.iteratorTree(mt));//遍历打印 return mt; }
          
         
        
       
      
     

提供一个工具类:

1 import java.util.ArrayList;  2 import java.util.List;  3 /**  4  * 树形节点模型  5  * @author chenht  6  *  7  */  8 public class Node {  9     public Node() {  10         this.nodes = new ArrayList
     
      (); 11     } 12     public Node(String nodeId,String pId) { 13         this.nodeId = nodeId; 14         this.pid = pId; 15         this.nodes = new ArrayList
      
       (); 16     } 17     /** 18      * 生成一个节点 19      * @param nodeId 20      * @param pId 21      * @param text 22      * @param icon 23      * @param href 24      */ 25     public Node(String nodeId, String pId, String text, String icon, String href) { 26         super(); 27         this.nodeId = nodeId; 28         this.pid = pId; 29         this.text = text; 30         this.icon = icon; 31         this.href = href; 32         this.nodes = new ArrayList
       
        (); 33     } 34  35     private String nodeId;    //树的节点Id，区别于数据库中保存的数据Id。 36     private String pid; 37     private String text;   //节点名称 38     private String icon; 39     private String href;   //点击节点触发的链接 40     private List
        
          nodes;    //子节点，可以用递归的方法读取 41      42     public String getNodeId() { 43         return nodeId; 44     } 45     public void setNodeId(String nodeId) { 46         this.nodeId = nodeId; 47     } 48      49     public String getPid() { 50         return pid; 51     } 52     public void setPid(String pid) { 53         this.pid = pid; 54     } 55  56     public String getText() { 57         return text; 58     } 59     public void setText(String text) { 60         this.text = text; 61     } 62      63     public String getIcon() { 64         return icon; 65     } 66     public void setIcon(String icon) { 67         this.icon = icon; 68     } 69      70     public String getHref() { 71         return href; 72     } 73     public void setHref(String href) { 74         this.href = href; 75     } 76      77     public List
         
           getNodes() { 78         return nodes; 79     } 80     public void setNodes(List
          
            nodes) { 81 this.nodes = nodes; 82 } 83 84 /** 85 * 生成一颗多叉树，根节点为root 86 * @param Nodes 生成多叉树的节点集合 87 * @return NodeTree 88 */ 89 public Node createTree(List
           
             Nodes) { 90 if (Nodes == null || Nodes.size() < 0) 91 return null; 92 Node root = new Node("root","0"); 93 // 将所有节点添加到多叉树中 94 for (Node node : Nodes) { 95 if (node.getPid().equals("0") || node.getPid().equals("root")) { 96 // 向根添加一个节点 97 root.getNodes().add(node); 98 } else { 99 addChild(root, node);100 }101 }102 return root;103 }104 105 /**106 * 向指定多叉树节点添加子节点107 * @param Node 多叉树节点108 * @param child 节点109 */110 public void addChild(Node Node, Node child) {111 for (Node item : Node.getNodes()) {112 if (item.getNodeId().equals(child.getPid())) {113 // 找到对应的父亲114 item.getNodes().add(child);115 break;116 } else {117 if (item.getNodes() != null && item.getNodes().size() > 0) {118 addChild(item, child);119 }120 }121 }122 }123 124 /**125 * 遍历多叉树126 * @param Node 多叉树节点127 * @return128 */129 public String iteratorTree(Node Node) {130 StringBuilder buffer = new StringBuilder();131 buffer.append("\n");132 if (Node != null) {133 for (Node index : Node.getNodes()) {134 buffer.append(index.getNodeId() + ",");135 if (index.getNodes() != null && index.getNodes().size() > 0) {136 buffer.append(iteratorTree(index));137 }138 }139 }140 buffer.append("\n");141 return buffer.toString();142 }143 144 145 /**146 * 遍历多叉树147 * @param Node 多叉树节点148 * @return149 */150 List
            
              node = new ArrayList
             
              ();151 public Node zxPraseTree(Node Node) {152 if (Node != null) {153 for (Node index : Node.getNodes()) {154 node.add(index);155 if (index.getNodes() != null && index.getNodes().size() > 0) {156 node.add(zxPraseTree(index));157 }158 }159 }160 //buffer.append("\n");161 Node n = new Node();162 n.setNodes(node);163 return n;164 }165 166 public static void main(String[] args) {167 List
              
                nodes = new ArrayList
               
                ();168 nodes.add(new Node("系统管理", "0"));169 nodes.add(new Node("角色管理", "系统管理"));170 nodes.add(new Node("资源管理", "系统管理"));171 nodes.add(new Node("用户管理", "系统管理"));172 nodes.add(new Node("添加用户", "用户管理"));173 nodes.add(new Node("修改用户", "用户管理"));174 nodes.add(new Node("机票管理", "系统管理"));175 176 Node tree = new Node();177 Node mt = tree.createTree(nodes);178 System.out.println(tree.iteratorTree(mt));179 Node n = tree.zxPraseTree(mt);180 List
                
                  list = n.getNodes();181 for(Node node : list) {182 System.out.println(node.getNodeId());183 }184 }185 186 187 }
                
               
              
             
            
           
          
         
        
       
      
     

传回来的数据：

再加上导入bootstrap的包，稍微改一下样式就是第一张图的效果啦~~~

最后再次说明：本例子支持连数据库，动态扩展。但是例子用了springMVC的环境，不可硬搬代码到你机器上去运行哦。主要思路已经写明白了，工具类也给出，已帮各位解决80%难度。主要是要明白每一步做了什么工作，事在人为，根据思路相信你也可以弄出来。说实话网络上太少比较靠谱的例子了。。。