使用layui+ajax實(shí)現(xiàn)簡(jiǎn)單的菜單權(quán)限管理及排序的方法
**簡(jiǎn)單的例子使用的layui框架,并沒(méi)有使用他的ztree插件,只用ajax配合sql完成最簡(jiǎn)單的一二級(jí)菜單權(quán)限控制及其排序功能。
先看數(shù)據(jù)庫(kù)設(shè)計(jì):**
user表:
role表:
menu表:
user_role表:
role_menu表:
在這里 menu的id依然是主鍵,多了mid也就是菜單id,pare_menu_id也就是這個(gè)菜單對(duì)應(yīng)的父級(jí)菜單的菜單id(mid);沒(méi)有的話,就是0,也就是一級(jí)菜單,在這里,一級(jí)菜單的mid必須滿足為整千數(shù),或者萬(wàn)也行,其子菜單在mid+999范圍內(nèi);
sql查詢結(jié)果:
前臺(tái)數(shù)據(jù)處理方法:
//菜單循環(huán)遍歷打印拼接操作 $(function () { $.ajax( { url : projectName+'/sys/menu/findMenuByRole', type : 'post', dataType : 'json', success : function(data) { var menu = ""; //定義變量存儲(chǔ) for(var i = 0;i<data.length;i++){ menu += "<li class='layui-nav-item '>" if(data[i].pareMenuId == 0){ //取出父元素的菜單,拼進(jìn)頁(yè)面 menu += "<a href='javascript:;'>"+data[i].menuName+"</a>" for(var j = 0;j<data.length;j++){ //繼續(xù)遍歷這幾條數(shù)據(jù) if(data[j].mid > data[i].mid && data[j].mid < (data[i].mid)+1000){ //取出這個(gè)父元素所對(duì)應(yīng)的子元素 menu += "<dl class='layui-nav-child'>" menu += "<dd>" menu += "<a href='"+data[j].menuPath+"' target='option'>"+' '+data[j].menuName+"</a>" menu += "</dd>" menu += "</dl>" } } } menu += "</li>"; } $("#nav").html(menu); var element = layui.element; element.init()//初始化element事件,使菜單展開(kāi) } }); })
效果如下:
圖1是默認(rèn)排序
下面我們將用戶管理放在第一位。看圖
將order設(shè)置為一結(jié)果如圖:
這樣用戶管理就去了第一位;
sql實(shí)現(xiàn):
SELECT t1.* FROM ( SELECT sys_menu.id, sys_menu.mid, sys_menu.menu_name, sys_menu.menu_path, sys_menu.pare_menu_id, sys_menu.`status`, sys_menu.`order`, abc.`status` AS status2 FROM sys_menu INNER JOIN ( SELECT * FROM role_menu WHERE id IN ( SELECT min(id) FROM role_menu GROUP BY role_id, menu_id ) AND role_menu.`status` = 1 ) abc ON abc.menu_id = sys_menu.id INNER JOIN sys_role ON sys_role.id = abc.role_id INNER JOIN user_role ON user_role.role_id = sys_role.id INNER JOIN sys_user ON sys_user.id = user_role.user_id WHERE sys_user.id = #{id} AND sys_menu.`status` = 1 ORDER BY mid ) t1 ORDER BY t1.pare_menu_id, t1.`order`;
**上圖#{id}就是用戶的id,多表關(guān)聯(lián)查詢就可以了;(因?yàn)橛玫氖莝m框架單純的springMvc+mybatis+html)
關(guān)于權(quán)限,當(dāng)然不同用戶看到的東西不同;至于菜單的權(quán)限,我是在role_menu表中加了status,默認(rèn)都是0;admin用戶的都是1;因?yàn)槿绻墙巧牟藛问跈?quán)很麻煩;干脆都給他賦予權(quán)限,之不過(guò)狀態(tài)這里給她控制一下就可以了,也就是添加一個(gè)菜單,就給這個(gè)表每個(gè)角色添加一條數(shù)除admin其余為status=0;**
以上這篇使用layui+ajax實(shí)現(xiàn)簡(jiǎn)單的菜單權(quán)限管理及排序的方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實(shí)現(xiàn)的可變動(dòng)態(tài)數(shù)字鍵盤控件方式實(shí)例代碼
本篇文章主要介紹了JavaScript實(shí)現(xiàn)的可變動(dòng)態(tài)數(shù)字鍵盤控件方式實(shí)例代碼,具有一定的參考價(jià)值,有興趣的可以了了解一下2017-07-07JavaScript實(shí)現(xiàn)簡(jiǎn)單的倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單的倒計(jì)時(shí)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06javascript跳轉(zhuǎn)與返回和刷新頁(yè)面的實(shí)例代碼
這篇文章主要介紹了javascript跳轉(zhuǎn)與返回和刷新頁(yè)面的實(shí)例代碼,簡(jiǎn)單介紹了javascript中window.open()與window.location.href的區(qū)別,感興趣的朋友一起看看吧2019-11-11通過(guò)javascript的匿名函數(shù)來(lái)分析幾段簡(jiǎn)單有趣的代碼
想起自己很久以前學(xué)習(xí)javascript的經(jīng)歷,也曾經(jīng)碰到過(guò)幾個(gè)由匿名函數(shù)造成的困擾(其中一個(gè)就是由閉包引起的),下面就整理幾段簡(jiǎn)單代碼討論一下,讓我們大家一起進(jìn)步。2010-06-06JS組件Bootstrap dropdown組件擴(kuò)展hover事件
bootstrap的下拉組件,需要點(diǎn)擊click時(shí),方可展示下拉列表。因此對(duì)于喜歡簡(jiǎn)單少操作的大家來(lái)說(shuō),點(diǎn)擊一下多少帶來(lái)不便,因此,引入hover監(jiān)聽(tīng),鼠標(biāo)經(jīng)過(guò)自動(dòng)展示下拉框。這篇文章主要介紹了JS組件Bootstrap dropdown組件擴(kuò)展hover事件,感興趣的小伙伴們可以參考一下2016-04-04微信小程序scroll-view橫向滑動(dòng)嵌套for循環(huán)的示例代碼
這篇文章主要介紹了微信小程序scroll-view橫向滑動(dòng)嵌套for循環(huán)的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09使用Chrome調(diào)試JavaScript的斷點(diǎn)設(shè)置和調(diào)試技巧
這篇文章主要介紹了使用Chrome調(diào)試JavaScript的斷點(diǎn)設(shè)置和調(diào)試技巧,需要的朋友可以參考下2014-12-12