蝙蝠岛资源网 Design By www.hbtsch.com

**简单的例子使用的layui框架,并没有使用他的ztree插件,只用ajax配合sql完成最简单的一二级菜单权限控制及其排序功能。

先看数据库设计:**

user表:

使用layui+ajax实现简单的菜单权限管理及排序的方法

role表:

使用layui+ajax实现简单的菜单权限管理及排序的方法

menu表:

使用layui+ajax实现简单的菜单权限管理及排序的方法

user_role表:

使用layui+ajax实现简单的菜单权限管理及排序的方法

role_menu表:

使用layui+ajax实现简单的菜单权限管理及排序的方法

在这里 menu的id依然是主键,多了mid也就是菜单id,pare_menu_id也就是这个菜单对应的父级菜单的菜单id(mid);没有的话,就是0,也就是一级菜单,在这里,一级菜单的mid必须满足为整千数,或者万也行,其子菜单在mid+999范围内;

sql查询结果:

使用layui+ajax实现简单的菜单权限管理及排序的方法

前台数据处理方法:

//菜单循环遍历打印拼接操作
  $(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++){ //继续遍历这几条数据
     if(data[j].mid > data[i].mid && data[j].mid < (data[i].mid)+1000){ //取出这个父元素所对应的子元素
     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是默认排序

使用layui+ajax实现简单的菜单权限管理及排序的方法

下面我们将用户管理放在第一位。看图

使用layui+ajax实现简单的菜单权限管理及排序的方法

将order设置为一结果如图:

使用layui+ajax实现简单的菜单权限管理及排序的方法

这样用户管理就去了第一位;

sql实现:


 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,多表关联查询就可以了;(因为用的是sm框架单纯的springMvc+mybatis+html)

关于权限,当然不同用户看到的东西不同;至于菜单的权限,我是在role_menu表中加了status,默认都是0;admin用户的都是1;因为如果是角色的菜单授权很麻烦;干脆都给他赋予权限,之不过状态这里给她控制一下就可以了,也就是添加一个菜单,就给这个表每个角色添加一条数除admin其余为status=0;**

以上这篇使用layui+ajax实现简单的菜单权限管理及排序的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

标签:
layui,ajax,菜单,权限管理,排序

蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

评论“使用layui+ajax实现简单的菜单权限管理及排序的方法”

暂无使用layui+ajax实现简单的菜单权限管理及排序的方法的评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。