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

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

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

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

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

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

html相关代码

    

      

        管理后台
      
      
      

        
        
      
    

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 += '
\n' +
                  '\n' +
                  '                \n' +
                  '                '+item.name+'\n' +
                  '              \n\n';
        menuChildren(item.children, 2, true);
      }else if(level == 2){
        if(item.children.length>0){
          menu += '
\n' +
                  ' 
\n' +
                  '   '+item.name+'\n' +
                  '     
\n';
          menuChildren(item.children, 3, true);
        }else{
            menu += '
\n' +
                    '
\n' +
                    ''+item.name+'\n' +
                    '
\n';
          menuChildren(item.children, 3, false);
        }
      }else{
        menu += '
'+item.name+'
\n';
      }
    });
    if(level == 1){
      menu += '
';
    }else if(level == 2){

    }else if(level == 3){
      if(order){
        menu += '\n\n\n';
      }else{
        menu += '\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":[]}]}]}