layuiAdmin动态生成菜单并递归显示
最开始的Bootstrap写后台前端,慢慢的试用layui,然后有用vue写了一段时间,发现还是layui写起来省心快速。还是回归到layui首先后端数据需要排序已经完成。这是我自己递归的php代码public function getTree($array,$id = 0,$level = 0){$tree = array();//每次都声明一个新数组用来放子元素foreach($array a
·
最开始的Bootstrap写后台前端,慢慢的试用layui,然后有用vue写了一段时间,发现还是layui写起来省心快速。还是回归到layui
首先后端数据需要排序已经完成。这是我自己递归的php代码
public function getTree($array,$id = 0,$level = 0){
$tree = array(); //每次都声明一个新数组用来放子元素
foreach($array as $v){
if($v['parent_id'] == $id){ //匹配子记录
$v['level'] = $level;
$str ="";
for ($i=0;$i<$level;$i++){
$str = $str."--";
}
$v['levelName'] = $str.''.$v['name'];
$v['children'] = $this->getTree($array,$v['id'],$level+1); //递归获取子记录
if($v['children'] == null){
unset($v['children']); //如果子元素为空则unset()进行删除,说明已经到该分支的最后一个元素了(可选)
}
$tree[] = $v; //将记录存入新数组
}
}
return $tree; //返回新数组
}
我得到的数据样式是这样的
现在就是关键的时候,,在layuiAdmin左侧正常显示
<script>
//注意:导航 依赖 element 模块,否则无法进行功能性操作
layui.use('element', function(){
var $ = layui.jquery
,element = layui.element;
//获取所有的菜单
$.ajax({
url:"index",
type:"POST",
dataType:"json",
success:function (res) {
// console.log(res);
//先添加所有的主材单
$.each(res.data,function(i,obj){
console.log(obj.children);
var content='<li class="layui-nav-item" data-name='+obj.action+'>';
//判断是否存在下一级栏目,存在就不跳转,不存在就跳转
if (obj.children == undefined) {
content+='<a href="'+'/'+obj.app+'/'+obj.controller+'/'+obj.action+'"><i class="layui-icon '+obj.icon+'"></i><cite>'+obj.name+'</cite></a>';
}else{
content+='<a href="javascript:;"><i class="layui-icon '+obj.icon+'"></i><cite>'+obj.name+'</cite></a>';
}
//这里是添加所有的子菜单
content+=loadchild(obj);
content+='</li>';
$(".layui-nav-tree").append(content);
});
element.init();
},error:function(jqXHR){
alert("发生错误:"+ jqXHR.status);
}
});
//组装子菜单的方法
function loadchild(obj){
if(obj==null){
return;
}
var content='';
if(obj.children!=null && obj.children.length>0){
content+='<dl class="layui-nav-child">';
}else{
content+='<dl>';
}
if(obj.children!=null && obj.children.length>0){
$.each(obj.children,function(i,note){
content+='<dd>';
content+='<a href="'+'/'+note.app+'/'+note.controller+'/'+note.action+'">'+note.name+'</a>';
if(note.children==null){
return;
}
content+=loadchild(note);
content+='</dd>';
});
content+='</dl>';
}
return content;
}
});
</script>
最终的结果图:
主要的代码都已经贴出来,按照这个步骤就没有问题
更多推荐
已为社区贡献2条内容
所有评论(0)