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

古城微笑少年丶 2022-11-04 15:24 186阅读 0赞

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

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

发表评论取消回复

表情：

评论列表（有 0 条评论，186人围观）

还没有评论，来说两句吧...

相关阅读

相关 Layui -- 实现动态操作左侧菜单栏

一、实现效果 ![layui实现左侧菜单栏效果][layui] 二、代码实现 **1. main.ftl** 项目主页面，注意引入layui的cs...

r囧r小猫/ 2024年04月18日 18:13/ 0 赞/ 122 阅读

相关 Layui实现树状菜单

实现步骤： 1.数据库分析 ![6e6350f2ca4941c69514129c330052fa.png][] 如图所示，聪明的你可能发现了！有的数据的属性pid

本是古典何须时尚/ 2024年03月17日 18:54/ 0 赞/ 71 阅读

相关 Layui菜单模块

> 今天继续有我给大家layui菜单在web中的应用一.介绍 1.什么是菜单模块？ Layui是一个轻量级的前端框架，提供了丰富的UI组件和便捷的开发方式，而

柔情只为你懂/ 2024年03月17日 18:35/ 0 赞/ 39 阅读

相关什么是前端渲染和后端渲染，前端路由和后端路由。

[—文章首发—][Link 1] 什么是前端渲染和后端渲染，前端路由和后端路由。 [视频讲解][Link 2] 后端渲染：服务器直接生产渲

Myth丶恋晨/ 2023年03月03日 11:07/ 0 赞/ 62 阅读

相关 layui结合ajax实现下拉菜单联动效果

![11f4800b45bf04c9cc53cb44278cf05e.png][] 大家好好，我是雄雄，欢迎关注公众号：雄雄的小课堂。昨天分享的是使用layui集合spr

ゝ一世哀愁。/ 2022年11月14日 13:18/ 0 赞/ 248 阅读

相关 layui结合ajax实现下拉联动效果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

墨蓝/ 2022年11月14日 07:55/ 0 赞/ 241 阅读

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

注意：接口渲染的时候一定要防止动态化的问题 layui.use(['element'],function(){ var element = layu

古城微笑少年丶/ 2022年11月04日 15:24/ 0 赞/ 187 阅读

相关 layui三级菜单渲染

> 项目做完了，可以有时间写写博客了。今天给大家讲解一下layui的三级动态加载菜单含后端代码。我是最近刚学的layui，非常感谢贤心大神。开发出这么牛逼ui的框

痛定思痛。/ 2022年03月08日 06:40/ 0 赞/ 688 阅读

相关 layui三级导航菜单

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta n

你的名字/ 2022年02月28日 08:36/ 0 赞/ 371 阅读

相关 Layui表格渲染

开发工具与关键技术： Visual Studio 2015 – Layui表格渲染作者：廖亚星撰写时间：2019年5 月15 日下面我用Layui插件来渲染代码

缺乏、安全感/ 2022年01月31日 05:49/ 0 赞/ 596 阅读