layui动态生成导航栏

案例下载地址：  https://gitee.com/tudoumlp/just1.git

Head部分

　　引入css样式表:

<link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
//cdn
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/>

　　引入js库:

<script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
//cdn
<script src="https://www.layuicnd.com/layui/layui.js"></script>

Html部分

<div class="layui-side">
      <div class="layui-side-scroll" id="navbar_side" lay-filter="side"></div>
</div>

Js部分：数据模拟和数据请求

<script>
//左侧竖导航：模拟数据
layui.config({
    base: 'static/js/',　　//需要依赖的navbar.js/tab.js路径
}).use(['element', 'layer', 'navbar', 'tab'], function () {
    var element = layui.element,
        $ = layui.jquery,
        layer = layui.layer,
        navbar = layui.navbar();

   //模拟数据navs
　　navs = [
	  {
	    "title": "首页",
	    "icon": "fa fa-home", //左侧图标
	    "spread": false,　　//是否默认展开
	    "href": "${pageContext.request.contextPath}/static/modules/main/index.jsp" //点击之后，右侧iframe显示的页面路径
	  },
	  {
	    "title": "营业厅",
	    "icon": "fa fa-desktop ",
	    "spread": false,
	    "href": " ",
	    "children": [　　//二级菜单 children
	      {
	        "title": "指标",
	        "icon": "fa fa-flag-checkered",
	        "href": "${pageContext.request.contextPath}/static/modules/main/setting/userList.jsp",
	        "spread": false
	      },
	      {
	        "title": "效益",
	        "icon": "fa fa-line-chart",
	        "href": "${pageContext.request.contextPath}/static/modules/main/setting/userList.jsp",
	        "spread": false
	      }
	    ]
	  },
	  {
	    "title": "系统设置",
	    "icon": "fa fa-cogs",
	    "href": "",
	     "spread":false,
	     "children": [
	       　　{
	          "title": "权限设置",
	          "icon": "fa fa-balance-scale",
	           "href": ""
	          }
	        ] 
	    },
	  {
	    "title": "明细导入",
	    "icon": "fa fa-file-text",
	    "spread": false,
	    "href": "${pageContext.request.contextPath }/static/modules/DataImport/importExcel.jsp"
	}];
			  
　　//设置navbar
    navbar.set({
    	type:'GET', //获取方式
        spreadOne: true,　　//设置是否只展开一个二级菜单
        elem: "#navbar_side",　　//存在组件的容器
        cached: false,　　//是否启用缓存，如果设置为true，则将初始化数据的数据添加至缓存
        data: navs,　　//提供给组件的数据列表，请严格按照规定格式提供。
	/*cached:true,　　
	url: 'datas/nav.json' //提供数据源远程的URL,当前只支持同步的方式读取数据 */　　
    });

    //渲染navbar
    navbar.render();

    //监听点击事件
    navbar.on('click(side)', function (data) {
        var childHtml = data.field.href;//获取当前点击的路径
        $(".layui-body iframe").attr("src",childHtml);//将路径赋值给iframe展示
    });
});
</script>


<script>
//左侧竖导航：请求数据
layui.config({
    base: 'static/js/',　　//需要依赖的navbar.js/tab.js路径
}).use(['element', 'layer', 'navbar', 'tab'], function () {
    var element = layui.element,
        $ = layui.jquery,
        layer = layui.layer,
        navbar = layui.navbar();

        $.ajax({
            type:'get',
            url:"${pageContext.request.contextPath }/mainIndexData",
            success:function(data){
                //console.log(data);
                var navData = data.functionList;
                $("#admin_userName").text(data.fullname); //用户名称

            //设置navbar
            navbar.set({
                spreadOne: true,
                elem: "#navbar_side",
                cached: false,
                data: navData
            });

        //渲染navbar
        navbar.render();

        //监听点击事件
        navbar.on('click(side)', function (data) {
        var childHtml = data.field.href;//获取当前点击项的路径
        $(".layui-body iframe").attr("src",childHtml);//将路径赋值给右侧iframe
    });	
    }
});

});
</script>            

navbar.on('event(过滤器值)', callback);

navbar.on('click(side)', function(data) {
    //data参数说明
    //包含两个属性：data.elem 和 data.field
    //data.elem 是点击的a标签dom对象
    //data.field 包含三个属性
    //1、data.field.href  设置的连接地址
    //2、data.field.icon  设置的图标
    //3、data.field.title 设置的标题
     console.log(data.elem);
     console.log(data.field.title);
     console.log(data.field.icon);
     console.log(data.field.href);
});

报错处理：

 

layui.element is not a function　　将 element = layui.element()　==> 改为element = layui.element   layui版本为2.0以上

layui2.0版本修改了很多地方：如 var form = layui.form; var element = layui.element; laypage.render(options) 

 

　不知道为什么无法回复评论，在这里说一下，这个生成依赖 tab.js / navbar.js / common.js 三个js文件，需要将三个文件下载下来或者拷贝形成js文件引入即可。

　在博客上上传了个例子，可下载  layui-navbar.rar 

　若是下载不了，则点击这个地址去下载即可： https://gitee.com/tudoumlp/just1.git

 

PS：数据格式需要严格按照规定提供

演示地址： http://m.zhengjinfan.cn/ 

下载地址： http://git.oschina.net/besteasyteam/beginner_admin 

　　　　by  Layui_初学者 

下载文件：tab.js　　navbar.js       common.js

 

(layui学习之导航)