管理后台无限级菜单

管理后台菜单遍历

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

1）先看效果图

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

 //获取菜单
public function menu(){
    $data = Db::table('sys_menu')->where(['status'=>1])->order('sort','asc')->select()->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">
	            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
	            <ul id="menu_ul" class="layui-nav layui-nav-tree"  lay-filter="menu">
	                <!--<li class="layui-nav-item layui-nav-itemed">
	                    这里放从后台获取的菜单数据
	                </li>-->
	            </ul>
	        </div>
	    </div>	

//JavaScript代码区域
layui.use('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.parse(result);
                if(json_result.code == 1){
                    //获取验证码成功
                    menu_one(json_result.data);
                }else{
                    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