layui结合后端语言实现菜单渲染

注意：接口渲染的时候 一定要防止动态化的问题

layui.use(['element'],function(){
    var element = layui.element;

//初始化动态元素，一些动态生成的元素如果不设置初始化，将不会有默认的动态效果
element.init();

例子：
我使用了layui中的menu结构，这个结构一般来说使用Java、php进行结合，php的话页面可以混用，Java就不行了，Java中是用呢ajax进行接口获取使用之后，进行菜单渲染

渲染完成之后，没有动态效果，那么需要element进行设置

html相关代码

<div class="layui-side layui-side-menu">
    <div class="layui-side-scroll">
      <div class="layui-logo" lay-href="home/console.html">
        <span>管理后台</span>
      </div>
      
      <ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu" lay-filter="layadmin-system-side-menu">
        
        <span class="layui-nav-bar"></span>
      </ul>
    </div>
</div>

js相关代码

window.menu = '';
  layui.use(['index','layer', 'form','element'],function(){
    var layer = layui.layer,$ = layui.$, element = layui.element;
    $.ajax({
      url:'/user/functionList',
      data:{},
      type:'get',
      dataType:'json',
      async:false,
      success:function(result){
        var menuStr = result.data;
        menuChildren(menuStr,1,true);
        $("#LAY-system-side-menu").append(menu);
        //初始化动态元素，一些动态生成的元素如果不设置初始化，将不会有默认的动态效果
        element.init();
      }
    });
  })
  
  /**
   * 根据级别 最高级别三级
   * @param menuStr
   * @param level
   */
  function menuChildren(menuStr, level, order){
    $.each(menuStr, function(i, item){
      if(level == 1){
          menu += '<li data-name="'+item.name+'" class="layui-nav-item">\n' +
                  '<a href="javascript:;" lay-tips="'+item.name+'" lay-direction="'+item.children.length+'">\n' +
                  '                <i class="layui-icon layui-icon-app"></i>\n' +
                  '                <cite>'+item.name+'</cite>\n' +
                  '              <span class="layui-nav-more"></span>\n</a>\n';
        menuChildren(item.children, 2, true);
      }else if(level == 2){
        if(item.children.length>0){
          menu += '<dl class="layui-nav-child">\n' +
                  ' <dd data-name="content">\n' +
                  '   <a href="javascript:;">'+item.name+'<span class="layui-nav-more"></span></a>\n' +
                  '     <dl class="layui-nav-child">\n';
          menuChildren(item.children, 3, true);
        }else{
            menu += '<dl class="layui-nav-child">\n' +
                    '<dd class="layui-nav-itemed">\n' +
                    '<a lay-href="'+item.url+'">'+item.name+'</a>\n' +
                    '</dd>\n';
          menuChildren(item.children, 3, false);
        }
      }else{
        menu += '<dd data-name="'+item.name+'"><a lay-href="'+item.url+'">'+item.name+'</a></dd>\n';
      }
    });
    if(level == 1){
      menu += '</li>';
    }else if(level == 2){

    }else if(level == 3){
      if(order){
        menu += '</dl>\n</dd>\n</dl>\n';
      }else{
        menu += '</dl>\n';
      }
    }
  }

 

数据结构体(java/php/其他语言) json数据结构

{"code":0,"message":"成功","data":[{"id":1,"name":"权限管理","parentId":0,"url":null,"children":[{"id":2,"name":"用户列表","parentId":1,"url":"user/index","children":[{"id":5,"name":"test","parentId":2,"url":"test/test","children":[]}]},{"id":3,"name":"角色列表","parentId":1,"url":"role/index","children":[]},{"id":4,"name":"菜单列表","parentId":1,"url":"function/index","children":[]}]}]}