layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)

网络编程 2024/11/8 佚名

3 2 1

声明：这里非常感谢闲心大神，开源了非常好用的前端UI框架，layui，如有侵权请联系我。当然闲心在2.0版本的layuiAdmin已经支持了，不过是收费版的，需要的同学可以自行购买，网址：http://www.layui.com/admin/pro/

本人在做管理后台事用到了左侧的导航列表，但是管理后台进来的菜单是根据不同账户的权限，显示不同的菜单。这时候需要动态的渲染左侧的列表。但是1.0版本只是更新到2级菜单，不满足如下图的3级菜单需求，只能自己动手，改造源码

话不多说，上代码：

1.html部分，我需要一个容器用于渲染菜单

<div class="layui-side layui-bg-black" id="admin-side">
  <div class="layui-side-scroll">
  <ul class="layui-nav layui-nav-tree" id="nav" lay-filter="demo"></ul>
  </div>
 </div>

接下来是插件以及相关JS,css引入，注意：路径问题，换成自己本地的路径

<link rel="stylesheet" href="../layui/css/layui.css" rel="external nofollow" >
<script src="/UploadFiles/2021-04-02/jquery-1.12.2.js">

2.js部分


<script>
 //监听选中页签添加样式
 layui.config({
 base: '../layui/' //navbar组件js所在目录
 }).use('navbar', function() {
 var navbar = layui.navbar();
 navbar.set({
  elem: '#nav',
  url: "../layui/nav2.json" //数据源地址，我用了本地写的json数据
 });
 navbar.render();
 //下面的部分不是必须的
 navbar.on('click(demo)', function(data) {
  console.log(data.elem);
  console.log(data.field.title);//标题
  console.log(data.field.icon);//图标
  console.log(data.field.href);//调转地址
  layer.msg(data.field.href);
 });
 
 //给选中的页签添加选中样式（解决刷新失效问题）
 var url = window.location.href.replace("//", "");
 var relUrl = url.substring(url.lastIndexOf("/") + 1);
 //去掉参数部分
 if (relUrl.indexOf("") != -1) {
  relUrl = relUrl.split("")[0];
 }
 $("#leftNavbar a").each(function () {
  var that = this;
 if ($(that).attr("href") == relUrl) {
  $(that).parent().addClass("layui-this");
  $(that).parents("li:eq(0)").addClass("layui-nav-itemed");
  var nodes = $(that).parents("li:eq(0)").find("a .layui-nav-more");
  if (nodes.length > 0) {
  nodes.each(function () {
   if ($(this).parents("dd:eq(0)").find("[href='" + relUrl + 
  "']").length > 0) {
   $(this).parent().parent().addClass("layui-nav-itemed");
   }
  });
  }
  }
 });
 
 });
 </script>


重点来了：navbar,js


/**
 * navbar.js
 * @author 御风 <1945199284@qq.com>
 */
layui.define(['element', 'common'], function (exports) {
 "use strict";
 var $ = layui.jquery,
 layer = parent.layer === undefined "layui-nav layui-nav-tree beg-navbar">';
 for (var i = 0; i < data.length; i++) {
  if (data[i].spread) {
  ulHtml += '<li class="layui-nav-item layui-nav-itemed">';
  } else {
  ulHtml += '<li class="layui-nav-item">';
  }
  if (data[i].children !== undefined && data[i].children !== null && data[i].children.length > 0) {
  ulHtml += '<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" >' + data[i].title;
  ulHtml += '<span class="layui-nav-more"></span>';
  ulHtml += '</a>';
  ulHtml += '<dl class="layui-nav-child">';
  //二级菜单
  for (var j = 0; j < data[i].children.length; j++) {
   //是否有孙子节点
   if (data[i].children[j].children !== undefined && data[i].children[j].children !== null && data[i].children[j].children.length > 0) {
   ulHtml += '<dd>';
   ulHtml += '<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" >' + data[i].children[j].title;
   ulHtml += '<span class="layui-nav-more"></span>';
   ulHtml += '</a>';
   //三级菜单
   ulHtml += '<dl class="layui-nav-child">';
    var grandsonNodes = data[i].children[j].children;
    for (var k = 0; k < grandsonNodes.length; k++) {
    ulHtml += '<dd>';
    ulHtml += '<a href="'+ grandsonNodes[k].href +'" rel="external nofollow" >' + grandsonNodes[k].title + '</a>';
    ulHtml += '</dd>';
    }
   ulHtml += '</dl>';
   ulHtml += '</dd>';
   }else{
   ulHtml += '<dd>';
   ulHtml += '<a href="'+data[i].children[j].href+'" rel="external nofollow" >' + data[i].children[j].title;
   ulHtml += '</a>';
   ulHtml += '</dd>';
   }
   //ulHtml += '<dd title="' + data[i].children[j].title + '">'; 
  }
  ulHtml += '</dl>';
  } else {
  var dataUrl = (data[i].href !== undefined && data[i].href !== '') "' + data[i].href + '"' : '';
  //ulHtml += '<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" ' + dataUrl + '>';
  ulHtml += '<a href="' + data[i].href + '" rel="external nofollow" ' + dataUrl + '>';
  if (data[i].icon !== undefined && data[i].icon !== '') {
   if (data[i].icon.indexOf('fa-') !== -1) {
   ulHtml += '<i class="fa ' + data[i].icon + '" aria-hidden="true" data-icon="' + data[i].icon + '"></i>';
   } else {
   ulHtml += '<i class="layui-icon" data-icon="' + data[i].icon + '">' + data[i].icon + '</i>';
   }
  }
  ulHtml += '<cite>' + data[i].title + '</cite>';
  ulHtml += '</a>';
  }
  ulHtml += '</li>';
 }
 ulHtml += '</ul>';
 
 return ulHtml;
 }
 
 var navbar = new Navbar();
 
 exports('navbar', function (options) {
 return navbar.set(options);
 });
});


公共配置common.js


/**
 * common.js
 * @author 御风 <1945199284@qq.com>
 */
layui.define(['layer'], function(exports) {
 "use strict";
 
 var $ = layui.jquery,
 layer = layui.layer;
 
 var common = {
 /**
  * 抛出一个异常错误信息
  * @param {String} msg
  */
 throwError: function(msg) {
  throw new Error(msg);
  return;
 },
 /**
  * 弹出一个错误提示
  * @param {String} msg
  */
 msgError: function(msg) {
  layer.msg(msg, {
  icon: 5
  });
  return;
 }
 };
 
 exports('common', common);
});


3.返回数据json格式


[
 {
 "title": "首页",
 "icon": " ",
 "spread": true,
 "href": ""
 },
 {
 "title": "一级导航",
 "icon": "fa-stop-circle",
 "spread": true,
 "href": "http://www.baidu.com",
 "children": [
 {
 "title": "二级导航",
 "icon": "",
 "href": "lala.html",
 "spread": true,
 "children": [
  {
  "title": "三级导航",
  "icon": " ",
  "href": "button.html"
  },
  {
  "title": "三级导航",
  "icon": " ",
  "href": "buttwswon.html"
  }
 ]
 }
 ]
 },
 {
 "title": "一级导航",
 "icon": "fa-stop-circle",
 "spread": true,
 "href": "http://www.baidu.com"
 
 },
 {
 "title": "一级导航",
 "icon": "fa-stop-circle",
 "spread": true,
 "href": "http://www.baidu.com"
 
 },
 {
 "title": "一级导航",
 "icon": "fa-stop-circle",
 "spread": true,
 "href": "http://www.baidu.com"
 
 }
]


总结：渲染dom,只要的思路就是用了2次for循环，遍历后台返回的数据。
以上这篇layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。