layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)_layui左侧菜单栏动态渲染资源-CSDN文库

1星 110 浏览量 2020-12-13 03:18:29 上传评论 1 收藏 82KB PDF 举报

资源推荐

资源详情

资源评论

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

声明：这里非常感谢闲心大神，开源了非常好用的前端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="../lib/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>

<script src="../layui/layui.js"></script>

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];

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余6页未读，立即下载

内容反馈

轻描淡写ζ

2021-03-14

不是很好用

weixin_38660918

粉丝: 9
资源: 926

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip