layui navTree 動態渲染菜單組件介紹

navTree.js 簡介

extends/navTree.js 是一個基於 layui 擴展的模塊化組件，使用它您可以很方便地構建后台布局系統中的垂直導航菜單與水平導航菜單。

extends/navTree.js 原本是作者在開源面板項目 Layui Fun CMS 中編寫的一個基於 layui 的動態渲染菜單的組件，現在把這個擴展組件獨立開發出來，使它不必依賴與 Layui Fun CMS 一起使用，只要你的后台系統符合 layui 后台布局的規范，即可獨立使用這個組件，這將極大地方便開發者編寫自己喜愛的代碼。

extends/navTree.js 組件是用來渲染生成符合 layui 語義化的水平導航菜單與垂直導航菜單結構，導航菜單點擊后將會在客戶端本地存儲（window.localStorage），因此刷新頁面后，右側 iframe 載入時將保持打開上一個頁面鏈接。

看到這，您應該知道，navTree 組件適合 iframe 版的后台布局系統使用。

軟件架構

擴展組件：extends/navTree.js

項目地址：https://gitee.com/kexin_front_end/layui_navtree（碼雲）

演示地址：https://kexin_front_end.gitee.io/layui_navtree/admin

在線文檔：https://kexin_front_end.gitee.io/layui_navtree/manuals

安裝教程

1. 本項目是一個前端項目，但是因為在腳本方法中使用了獲取 json 數據請求的方式來模擬與服務端交互，為防止瀏覽器提示跨域問題，因此項目文件需要部署在 web 容器下運行方可正常瀏覽，如：nginx、IIS、phpStudy、apache tomcat，推薦：nginx；

2. nginx.conf 相關配置：

#host layui_fun_cms
server {
	listen       8000;
	server_name  localhost;
	root         D:/Workspace/layui_navtree;
	client_max_body_size 200m;  

	#charset koi8-r;

	#access_log  logs/host.access.log  main;

        #轉發 web api 路由	
	location /app/ {
			root   html;    
			index  index.html index.htm;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_set_header Host $http_host;
			proxy_set_header X-NginX-Proxy true;			
			proxy_pass http://0.0.0.0:8080/;
			proxy_redirect off;
			client_max_body_size 200m;	#最大接受200m的文件
		}
}

 

3. 導航菜單有圖標樣式，可以使用 layui-icon 或者 font-awesome。如果您在瀏覽頁面時圖標未能正常顯示，請在您的 web 服務容器中配置添加相關字體圖標的 mime 類型。

使用說明

1. 僅出現側邊垂直導航

//渲染導航菜單（僅出現側邊垂直導航）
navTree.render({
	elem: '#sideNav',	//注意框架布局中應存在你指定的垂直導航容器		
	headerNavElem: false,	//不渲染頭部水平導航
	url: "api/nav", //獲取菜單數據的請求地址
	recursion: true,    //指定菜單數據是否需要遞歸處理：true表示數據源需要遞歸處理；false表示數據源已是樹形結構，不需要遞歸處理
	rootValue: "0",    //根節點菜單的主鍵值
	home: "page/home.html",	//默認或缺省時打開的頁面鏈接
	currentNavKey: "current_nav",
	done: function(){
		//菜單渲染完成后的回調方法
		console.log("后台菜單渲染完成！");
	}
});

 

圖：渲染導航菜單（僅出現側邊垂直導航）。

 

2. 出現頭部水平導航與側邊垂直導航（將聯動）

//渲染導航菜單（出現頭部水平導航+側邊垂直導航，將聯動）
navTree.render({
	elem: '#sideNav',	//注意框架布局中應存在你指定的垂直導航容器		
	headerNavElem: '#headerNav',	//出現頭部水平導航，注意布局中應存在你指定的頭部水平導航容器
	url: 'api/nav', //獲取菜單數據的請求地址
	recursion: true,    //指定菜單數據是否需要遞歸處理：true表示數據源需要遞歸處理；false表示數據源已是樹形結構，不需要遞歸處理
	rootValue: "0",    //根節點菜單的主鍵值
	home: "page/home.html",	//默認或缺省時打開的頁面鏈接
	currentNavKey: "current_nav",
	done: function(){
		//菜單渲染完成后的回調方法
		console.log("后台菜單渲染完成！");
	}
});

　　

圖：渲染導航菜單（出現頭部水平導航+側邊垂直導航，將聯動）。

 

3. 完整的參數配置

this.config = {
	elem: '.layui-nav[lay-filter="sideNav"]',	//選取左側垂直導航菜單容器
	headerNavElem: '.layui-nav[lay-filter="headerNav"]',	//選取頭部水平導航條容器（如果設置了此值，將會渲染顯示頭部水平導航條；不設置不會渲染顯示）
	url: null,  //異步請求菜單數據的接口地址，
	headers: null,	//異步接口的請求頭，如：headers: {token: 'secret'}
	method: "get",	//異步請求類型，默認：get	
	data: null,	//菜單數據的原生集合（Array），如果直接傳入了該配置參數，url 等異步參數將會被忽略
	home: "page/home.html",	//指定一個默認或缺省時打開的頁面鏈接，如：后台首頁，防止菜單鏈接跳轉出錯
	target: "right",	//指定菜單鏈接打開窗口的方式
	recursion: false,	//指定菜單數據是否需要遞歸處理：若菜單數據源已是遞歸數據（條目上下級之間通過 children 屬性嵌套），請設為 false；當設為 true 時組件將會在前端配合 props 來將數據源轉換為樹形結構
	rootValue: null,	//規定頂級節點的主鍵值，該參數用於篩選出頂級節點，進而封裝多層級的導航菜單結構
	props: { idKey: "id", //菜單項的主鍵名稱
		pidKey: "parentId", 	//父級節點屬性名稱
		childrenKey: "children", //子節點導航屬性名稱
		titleKey: "title", //菜單標題屬性名稱
		codeKey: "code", //菜單編碼屬性名稱，將映射為元素上的 data-code 屬性
		hrefKey: "href", //菜單項的鏈接地址屬性名稱
		targetKey: "target", //菜單超鏈接打開窗口方式的屬性名稱
		iconKey: "icon", 	//菜單項的圖標樣式屬性名稱
	},
	paddingLeft: "16",	//單位：px，按照層級深度設置菜單元素的左邊留白，讓內容縮進
	currentDataKey: "current_nav_data",	//是否緩存菜單數據在本地存儲中，已提供了一個默認的緩存項的鍵名稱，可自定義；如果不需要緩存，請設置為 false
	currentNavKey: "current_nav",	//是否緩存最近打開的導航菜單項，默認的緩存項的鍵名稱，可自定義；如果不需要緩存，請設置為 false
	done: null	//function(res){}，動態菜單渲染完成后的回調函數
}

　　

更新日志

v1.0.1，2019-10-15

• 首個版本發布，可渲染基於 layui 的水平導航與垂直導航，適用於 iframe 版的后台布局系統。
• 孵化。 

參與貢獻

1. 如發現 bug 請及時提交 issue 或在群聊中討論，等待作者補充升級。
2. 歡迎加入本項目的官方QQ群聊：708659082（Layui 前端精准問答）。
3. 本項目更新與升級將及時發布在碼雲倉儲，請到碼雲上來更新最新版本。