layuiAdmin动态生成菜单并递归显示

最开始的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='
';
          //判断是否存在下一级栏目，存在就不跳转，不存在就跳转
        if (obj.children == undefined) {
          content+='+'/'+obj.app+'/'+obj.controller+'/'+obj.action+'">+obj.icon+'">'+obj.name+'';
        }else{
          content+='+obj.icon+'">'+obj.name+'';
        }
        

          //这里是添加所有的子菜单
          content+=loadchild(obj);
          content+='
';
          $(".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+='
';
      }else{
        content+='
';
      }

      if(obj.children!=null && obj.children.length>0){
        $.each(obj.children,function(i,note){
          content+='
';
          content+='+'/'+note.app+'/'+note.controller+'/'+note.action+'">'+note.name+'';
          if(note.children==null){
            return;
          }
          content+=loadchild(note);
          content+='
';
        });

        content+='
';
      }
      return content;
    }
    });
</script>

最终的结果图：

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