1.简介

　　也许你对树菜单再熟悉不过了，然而你仍有可能更青睐layui的tree，它也许比以往你知道的任何一个类似的组件都更轻量、简单，你在享受许多功能的同时，甚至不用去记太多的参数。

另外，最大的重点在于，她在UI上完全遵循于当下主流的风格，并且具备高度可扩展性，会与你的许多页面非常融洽的并存。

2.制作如下案例

 

   步骤1.编写html

     
                        
      *上级菜单:                        
      
                            
       
                                
        
                                    
         --请选择--                                    
                                             
                                         
        
                                
        
                                    
         
                                        
          
                                    
         
                                
        
                            
       
                        
      
                    
     

   步骤2.初始话树与加载数据

layui.use(['element', 'tree', 'layer', 'form', 'upload'], function () {        var $ = layui.jquery, tree = layui.tree;        loadMenuTree(tree);        $(".downpanel").on("click", ".layui-select-title", function (e) {            $(".layui-form-select").not($(this).parents(".layui-form-select")).removeClass("layui-form-selected");            $(this).parents(".downpanel").toggleClass("layui-form-selected");            layui.stope(e);        }).on("click", "dl i", function (e) {            layui.stope(e);        });        $(document).on("click", function (e) {            $(".layui-form-select").removeClass("layui-form-selected");        });    });    function loadMenuTree(tree) {        var url = "permission/menuDataLayUiTree";        var params = {};        uwillBeAsyncTrue.getdata(url, params, function (data) {            tree({                elem: "#classtree",                nodes: data,                click: function (node) {                    var $select = $($(this)[0].elem).parents(".layui-form-select");                    $select.removeClass("layui-form-selected").find(".layui-select-title span").html(node.name).end().find("input:hidden[name='selectID']").val(node.id);                }            });        });    }

 　 附件:

     1.前端代码

1 <%@ page language="java" contentType="text/html; charset=UTF-8"  2          pageEncoding="UTF-8" %>  3 <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  4 <%@taglib prefix="sf" uri="http://www.springframework.org/tags/form" %>  5 <%  6     String path = request.getContextPath();  7     String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/";  8 %>  9  10  11  12      13     
       14     
       15      16     
       17     
       18     
       19     
       20     
       22     
       23     <%--  
      --%> 24      34      67  68  69 
      
        70     
        71     
       
 72     
       
         73         <%--左侧--%> 74         
        
          75             
         
           76                 <%-- 
          
菜单信息
--%> 77                 
          
            78                     
           
新增
 80                 
          
 81  82                 
          
            83                     
           
             84 
            
              85 
            
 86 
           
 87                 
          
 88             
         
 89         
        
 90  91         <%--右侧--%> 92         
        
          93             
         
编辑菜单
 94             
         
           95                 
          
            96                     
           
             97 
            *菜单名称: 98 
            
              99 
             102 
            
103 
           
104 105                     
           
106                     
           
107 108                     
           
            109 
            *上级菜单:110 
            
             111 
             
              112 
              
               113 
               --请选择--114 
               115 
               116 
              
117 
              
               118 
               
                119 
                
120 
               
121 
              
122 
             
123 
            
124 
           
125 126 127                     
           
128                     
           
129 130                     
           
            131 
            url地址:132 
            
             133 
             137 
            
138 
           
139 140                     
           
141                     
           
142 143                     
           
            144 
            排序:145 
            
             146 
             150 
            
151 
           
152 153                     
           
154                     
           
155 156                     
           
            157 
            图标地址:158 
            
             159 
             163 
            
164 
           
165 166                     
           
167                     
           
168 169                 
          
170             
         
171 172 173             
         174             
         175             <%-- 
         --%>176             
         177             
         
          178                 
          
保存181                 
182             
         
183         
        
184     
       
185 186 187 
      
188 189 190 191 192 193 194 <%----%>195 <%----%>196 197 198 199 200 475 476 

 

      2.后端数据结构拼接(采用的数一次性查出数据 递归拼接)

1  @Override 2     public List
      
        getMenuDataLayUiTree() { 3         //查询所有菜单 4         List
       
         list = new ArrayList<>(); 5         MenuLayuiTree menuNull = new MenuLayuiTree(); 6         menuNull.setId("0"); 7         menuNull.setPid("0"); 8         menuNull.setName("一级菜单"); 9         menuNull.setMenuLevel("1");10         menuNull.setMenuOrder("0");11         list.add(menuNull);12 13         List
        
          menuLayuiTrees = permissionDao.queryMenuLayuiTree();14 15         for (MenuLayuiTree menu : menuLayuiTrees) {16             String menuLevel = menu.getMenuLevel();17             if ("1".equals(menuLevel)) {18                 MenuLayuiTree method = method(menuLayuiTrees, menu);19                 list.add(method);20             }21         }22         return list;23     }24 25     public MenuLayuiTree method(List
         
           menuList, MenuLayuiTree menu) {26         List
          
            childrens = new ArrayList<>();27         String id = menu.getId();28         for (MenuLayuiTree childrenMenu : menuList) {29             String pid = childrenMenu.getPid();30             if (pid.equals(id)) {31                 childrens.add(childrenMenu);32                 //查询子节点的下级节点33                 method(menuList, childrenMenu);34             }35         }36         menu.setChildren(childrens);37         return menu;38     }
          
         
        
       
      

 

完美!