使用layui+ajax實現(xiàn)簡單的菜單權(quán)限管理及排序的方法

更新時間：2019年09月10日 16:40:42 作者：Inverse_fang

今天小編就為大家分享一篇使用layui+ajax實現(xiàn)簡單的菜單權(quán)限管理及排序的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

**簡單的例子使用的layui框架，并沒有使用他的ztree插件，只用ajax配合sql完成最簡單的一二級菜單權(quán)限控制及其排序功能。

先看數(shù)據(jù)庫設(shè)計：**

user表：

role表：

menu表：

user_role表：

role_menu表：

在這里 menu的id依然是主鍵，多了mid也就是菜單id，pare_menu_id也就是這個菜單對應(yīng)的父級菜單的菜單id（mid）；沒有的話，就是0，也就是一級菜單，在這里，一級菜單的mid必須滿足為整千數(shù)，或者萬也行，其子菜單在mid+999范圍內(nèi)；

sql查詢結(jié)果：

前臺數(shù)據(jù)處理方法：

//菜單循環(huán)遍歷打印拼接操作
  $(function () {
  $.ajax( {
   url : projectName+'/sys/menu/findMenuByRole',
   type : 'post',
   dataType : 'json',
   success : function(data) {
   var menu = ""; //定義變量存儲
   for(var i = 0;i<data.length;i++){
    menu += "<li class='layui-nav-item '>"
    if(data[i].pareMenuId == 0){ //取出父元素的菜單，拼進頁面
    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){ //取出這個父元素所對應(yīng)的子元素
     menu += "<dl class='layui-nav-child'>"
     menu += "<dd>"
     menu +=  "<a href='"+data[j].menuPath+"' target='option'>"+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+data[j].menuName+"</a>"
     menu += "</dd>"
     menu += "</dl>"
     }
    }
    }
    menu += "</li>";
   }
   $("#nav").html(menu);
   var element = layui.element;
   element.init()//初始化element事件，使菜單展開
   }
  });
  })

效果如下：

圖1是默認排序

下面我們將用戶管理放在第一位?？磮D

將order設(shè)置為一結(jié)果如圖：

這樣用戶管理就去了第一位；

sql實現(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)查詢就可以了；（因為用的是sm框架單純的springMvc+mybatis+html）

關(guān)于權(quán)限，當然不同用戶看到的東西不同；至于菜單的權(quán)限，我是在role_menu表中加了status，默認都是0；admin用戶的都是1；因為如果是角色的菜單授權(quán)很麻煩；干脆都給他賦予權(quán)限，之不過狀態(tài)這里給她控制一下就可以了，也就是添加一個菜單，就給這個表每個角色添加一條數(shù)除admin其余為status=0；**

以上這篇使用layui+ajax實現(xiàn)簡單的菜單權(quán)限管理及排序的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: