动态渲染左侧菜单栏 ：menu tree 动态渲染

其中后端代码不包含权限控制，同时支持二级(无子菜单) 和 三级菜单(无子菜单)。

1、layui前端代码：（其他前端框架实现方法通用，不过需要修改js中append对应标签元素即可）

 <div class="layui-side layui-bg-black">
         <div class="layui-side-scroll">
             <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
             <ul class="layui-nav layui-nav-tree" id="chuizhi"  lay-filter="test"></ul>
         </div>
     </div>

     <div class="layui-body">
         <!-- 内容主体区域 -->
         <iframe name="iframe" src="/test/welcome" width="100%" height="100%"
                 frameborder="no" border="0" scrolling="auto"></iframe>
     </div>

     <div class="layui-footer">
         <!-- 底部固定区域 -->
         © myzy.cn -
     </div>

 <script>

     function isArrayFn(value){//用于判断对象是否为数组.
         if (typeof Array.isArray === "function") {
             return Array.isArray(value);
         }else{
             return Object.prototype.toString.call(value) === "[object Array]";
         }
     }
     //JavaScript代码区域
     layui.use(['form', 'layedit','element', 'layer','laydate','table'], function(){
         var table = layui.table
             ,element = layui.element
             ,form = layui.form
             ,layer = layui.layer
             ,layedit = layui.layedit
             ,laydate = layui.laydate
             ,$ = layui.jquery;
37

         //动态渲染树形菜单
         $.post("/todo/treeData", function (data){//请求后端返回对应json
             var menu1 = [];//所有一级菜单名称数组
             for (var key in data) {
                 menu1.push(key);
             }
             var len = menu1.length;
             for(var i=0;i<len;i++){
                 $("#chuizhi").append(`<li class="layui-nav-item"><a href="javascript:;">${menu1[i]}</a>
                                 <dl class="layui-nav-child ${menu1[i]}">
                                 </dl></li>`);//一级菜单(有子菜单)
                 let ss = data[menu1[i]];
                 if(isArrayFn(ss)){
                     for(let j=0;j<ss.length;j++){
                         $("."+menu1[i]).append(`<dd class="twoMenu"><a href="${ss[j].url}" target="iframe">&nbsp;&nbsp;${ss[j].name}</a></dd>`);//只到(没有子菜单)二级菜单
                     }
                 }else{
                     let arr = [];
                     for(var key in ss){
                         arr = ss[key];
                         $("."+menu1[i]).append(`<li class="layui-nav-item twoMenu"><a href="javascript:;">&nbsp;${key}</a>
                                                         <dl class="layui-nav-child ${key}">
                                                         </dl></li>`);//二级菜单(有子菜单)
                         for(let j=0;j<arr.length;j++){
                             $("."+key).append(`<dd><a href="${arr[j].url}" target="iframe">&nbsp;&nbsp;${arr[j].name}</a></dd>`);//只到(没有子菜单)三级菜单
                         }
                     }
                 }
             }
             element.render();//element.init();//全部更新,用于动态渲染之后的挂载 (2)
             /**用于菜单显示效果：点击其他菜单，原来打开的菜单自动关闭*/
             $(".twoMenu,#chuizhi>li").on("click",function () {
                 if(!$(this).hasClass("layui-nav-itemed")){
                     $(this).removeClass("layui-nav-itemed");
                     if($(this).children().children().hasClass("layui-nav-itemed")){
                         $(this).children().children().removeClass("layui-nav-itemed");
                     }
                 }else if($(this).hasClass("layui-nav-itemed")){
                     $(this).addClass("layui-nav-itemed");
                     $(this).siblings().removeClass("layui-nav-itemed");
                     if(!$(this).children().children().hasClass("layui-nav-itemed")){
                         $(this).children().children().removeClass("layui-nav-itemed");
                     }
                 }
             })

         })
     });
 </script>

2.java后端代码：用于返回给前端 菜单(json) 数据

 @Override//其中menu_duidMapper为装载的dao层接口
     public Map<String, Object> queryJsonMenus() {
         Map<String, Object> mapR = new LinkedHashMap<String, Object>();
         //Map<String,Map<String,List<Map<String,String>>>> mapSan = new LinkedHashMap<>();//前端三级菜单json在后端表现形式
         //Map<String,List<Map<String,String>>> mapTwo = new LinkedHashMap<>();//前端二级菜单json在后端表现形式
         List<String> oneLevelMenuId = menu_duidMapper.selectGoodsMenuIdOneJ();//一级菜单id
         List<String> TwoLevelPId = menu_duidMapper.selectGoodsParentIdTwoJ(); //二级菜单fuid
         List<String> grandIdThreeJ = menu_duidMapper.selectGoodsGrandIdThreeJ();//三级菜单祖父id
         String oneName = null;
         String twoName = null;
         List<Map<String,String>> msp = null;
         List<String> threePid = null;
         for(String oneMid : oneLevelMenuId){
             Map<String,List<Map<String,String>>> mapTwo = new LinkedHashMap<>();//这里不可以使用单例，所以只能生命在for循环内部
             for(String erPid : TwoLevelPId){
                 if(oneMid.equals(erPid)){
                     oneName = menu_duidMapper.selectGoodsTypeByMenuId(oneMid);//根据一级菜单menuid查询对应名称
                     msp = menu_duidMapper.selectGoodsMapByPid(erPid);//根据二级菜单父id查找对应二级map
                     mapR.put(oneName,msp);//填充一级菜单对应的二级菜单(无子菜单)
                 }else{
                     continue;
                 }
             }
             for(String sanGpid : grandIdThreeJ){
                 if(oneMid.equals(sanGpid)){
                     oneName = menu_duidMapper.selectGoodsTypeByMenuId(oneMid);//
                     threePid = menu_duidMapper.selectGoodsParentIdThreeJByGrandId(sanGpid);//根据祖父id查询父id并去重
                     for(String tpid : threePid){
                         msp = menu_duidMapper.selectGoodsMapByPidAndGpid(tpid,sanGpid);//根据祖父id和父id查询对应map
                         twoName = menu_duidMapper.selectGoodsTypeByMenuId(tpid);//根据三级菜单父id查询对应二级菜单
                         //System.out.println(twoName);
                         mapTwo.put(twoName,msp);//填充二级菜单(有子菜单)和对应三级菜单(物资菜单)
                     }
                     mapR.put(oneName,mapTwo);//填充一级菜单所对应的二(有子菜单)三(无子菜单)级菜单
                 }else{
                     continue;
                 }
             }
         }
         return mapR;
     }

3.数据库表结构

 DROP TABLE IF EXISTS `menu_duid`;
 CREATE TABLE `menu_duid`  (
   `id` int(11) NOT NULL AUTO_INCREMENT,
   `name` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
   `menu_id` varchar(11) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '菜单id',
   `parent_id` varchar(11) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL DEFAULT '' COMMENT '菜单父id',
   `grand_pid` varchar(11) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL DEFAULT '' COMMENT '菜单爷爷id',
   `url` varchar(120) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '菜单路径',
   `romaker` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '备注',
   PRIMARY KEY (`id`) USING BTREE
 ) ENGINE = InnoDB AUTO_INCREMENT = 96 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

4.ajax返回的json数据格式为

 {
     "新闻资讯":{
         "企业新闻":[
             {
                 "menuID":"010101",
                 "name":"xxx",
                 "url":"/test/petroleum010101"
             },
             {
                 "menuID":"010102",
                 "name":"xxx",
                 "url":"/test/mAsphalt010102"
             }
         ],
         "行业新闻":[
             {
                 "menuID":"010201",
                 "name":"xxx",
                 "url":"/test/petroleum010201"
             },
             {
                 "menuID":"010202",
                 "name":"xxx",
                 "url":"/test/mAsphalt010202"
             }
         ]
     },
     "行业报告":{
         "日报":[
             {
                 "menuID":"020101",
                 "name":"xxx",
                 "url":"/test/petroleum020101"
             },
             {
                 "menuID":"020102",
                 "name":"xxx",
                 "url":"/test/mAsphalt020102"
             }
         ],
         "周报":[
             {
                 "menuID":"020201",
                 "name":"xxx",
                 "url":"/test/petroleum020201"
             },
             {
                 "menuID":"020202",
                 "name":"xxxx",
                 "url":"/test/mAsphalt020202"
             }
         ],
         "月报":[
             {
                 "menuID":"",
                 "name":"xxx",
                 "url":"/test/petroleum020301"
             },
             {
                 "menuID":"",
                 "name":"xxx",
                 "url":"/test/mAsphalt020302"
             }
         ],
         "年报":[
             {
                 "menuID":"",
                 "name":"xxx",
                 "url":"/test/petroleum020401"
             },
             {
                 "menuID":"",
                 "name":"xxx",
                 "url":"/test/mAsphalt020402"
             }
         ]
     },
     "政策法规":[
         {
             "menuID":"",
             "name":"xxx",
             "url":"/test/petroleum0301"
         },
         {
             "menuID":"",
             "name":"xxx",
             "url":"/test/mAsphalt0302"
         }
     ]
 }

5.对应查询的sql语句省略，这个比较简单，只用到了普通查询和几个子查询。。。。