管理后台无限级菜单

管理后台菜单遍历

很久就想做一个通用的管理后台出来，一直太懒没做，今天开始粗略搞了一下，只是先把框架搭建好，菜单栏弄了，主要分享一下菜单的制作，用的layui + thinkphp6

1）先看效果图

2）后台获取菜单数据关键代码

 //获取菜单public function menu(){快乐星期天    $data = Db::table('sys_menu')->where(['status'=>1])->order('sort','asc')->lect()->toArray();    if($data){        return $this->menu_handle($data);    }    return [];}private function menu_handle($data){    return $this->dg($data,0);}//递归查询所有子菜单private function dg($data,$parent_id){    $res = [];    foreach($data as $k=>$vv){        if($vv['parent_id'] == $parent_id){            $vv['child'] = $this->dg($data,$vv['id']) ?:[];            $res[] = $vv;        }    }    return $res;}

3）前端html+js 关键代码

<div class="layui-side layui-bg-black">        <div class="layui-side-scroll">            <!-- 左侧导航区域（可配合layu幼儿园六一儿童节主持词i已有的垂直导航） -->            <ul id="menu_ul" class="layui-nav layui-na播音自备稿件v-tree"  lay-filter="menu">                <!--<li class="layui-nav-item layui-nav-itemed">                    这里放从后台获取的菜单数据                </li>-->            </ul>        </div>    </div>//JavaScript代码区域layui.u('element', function(){    var element = layui.element;    get_menu();    function get_menu(){        $.ajax({            type:'post',            url:"/admin/home/menu",            data: {},            success:function(result){                var json_result = JSON.par(result);                if(json_result.code == 1){                    //获取验证码成功                    menu_one(json_result.data);                }el{                    console.log(json_result);                }            }        });    }    //菜单，把第一层添加进去    function menu_one(menu){        console.log(menu);        var html = '';        $.each(menu,function(i,v){            html += '<li class="layui-nav-item">\n' +                '                    <a href="javascript:;">'+v.name+'</a>';            var children_html = '';            //查看是否存在子菜单            if(v.child.length > 0){                //存在子菜单                children_html = children_menu(v.child);            }            children_html += ' </li> ';            四川专科学校html += children_html;        });        $('#menu_ul').append(html);        element.render();    }    //菜单，遍历下面的子菜单    function武汉科技大学城市学院 children_menu(children_arr){        var html = '<dl class="layui-nav-child">';        $.each(children_arr,function(i,v){            html += '<dd><a href="javascript:;">'+v.name+'</a>';            var children_html = '';            //查看是否存在子菜单            if(v.child.length > 0){                //存在子菜单                children_html = children_menu(v.child);            }            children_html += '</dd>';            html += children_html;        });        html += ' </dl> ';        console.log(html);        return html;    }});

4）从后台获取的菜单结构

5）提供一下本项目整套代码地址（持续更新中）

GitHub：git@github.com:youliroam/tp_admin.git

本文地址：https://blog.csdn.net/u014650004/article/details/107462823