layui動態生成導航欄

Head部分

　　引入css樣式表:

<link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">

　　引入js庫:

<script src="${pageContext.request.contextPath}/static/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) 

 

　　

 

PS：數據格式需要嚴格按照規定提供

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

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

　　　　by  Layui_初學者 

下載文件：tab.js　　navbar.js

 

(layui學習之導航)