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

古城微笑少年丶 2022-11-04 15:24 135阅读 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 条评论，135人围观）

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

相关阅读

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

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

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

相关 SpringSecurity结合JwtToken验证(后端部分)

SpringSecurity结合JwtToken验证简介：本文在SpringSecurity基础公共之上，整合JwtToken功能，本文是后端部分。对于Spring

以你之姓@/ 2024年03月26日 22:17/ 0 赞/ 12 阅读

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

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

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

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

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

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

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

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

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

相关 layui三级菜单渲染

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

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

相关 layui三级导航菜单

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

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

相关 Layui表格渲染

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

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

相关服务端渲染客户端渲染

渲染页面上的数据要发生更新服务端渲染后台语言通过一些模板引擎生成html 好处：前端耗时少（前端只负责将html进行展示），利于SEO 坏处：网络传输数据量大，

朴灿烈づ我的快乐病毒、/ 2021年09月18日 08:58/ 0 赞/ 495 阅读

相关 layui实现分页（前后端）

1.前端html代码： <!DOCTYPE html> <html lang="en"> <head> <meta name="a

你的名字/ 2021年05月10日 11:33/ 0 赞/ 603 阅读