管理后台无限级菜单

管理后台菜单遍历

很久就想做一个通用的管理后台出来，一直太懒没做，今天开始粗略搞了一下，只是先把框架搭建好，菜单栏弄了，主要分享一下菜单的制作，用的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 关键代码

	        

	            
	            

	                
	            
	        
	    
	

//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 += '
\n' +
                '                    '+v.name+'';

            var children_html = '';
            //查看是否存在子菜单
            if(v.child.length > 0){
                //存在子菜单
                children_html = children_menu(v.child);
            }
            children_html += ' 
 ';
            html += children_html;
        });
        $('#menu_ul').append(html);

        element.render();
    }

    //菜单，遍历下面的子菜单
    function children_menu(children_arr){
        var html = '
';
        $.each(children_arr,function(i,v){
            html += '
'+v.name+'';
            var children_html = '';
            //查看是否存在子菜单
            if(v.child.length > 0){
                //存在子菜单
                children_html = children_menu(v.child);
            }
            children_html += '
';
            html += children_html;
        });
        html += ' 
 ';
        console.log(html);
        return html;
    }
});

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

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

	GitHub：[email protected]:youliroam/tp_admin.git