最开始的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>

最终的结果图:

在这里插入图片描述

主要的代码都已经贴出来,按照这个步骤就没有问题

Logo

前往低代码交流专区

更多推荐