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":[]}]}]}

     

    你可能感兴趣的:(springcloud,java)