动态渲染左侧菜单栏：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语句省略，这个比较简单，只用到了普通查询和几个子查询。。。。

巴特西

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

最新文章

热门文章

巴特西

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

最新文章

热门文章

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