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


Posted in Javascript onSeptember 10, 2019

**简单的例子使用的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'>"+'     '+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实现简单的菜单权限管理及排序的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
js实现纯前端的图片预览
Apr 27 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
vue.js加载新的内容(实例代码)
Jun 01 Javascript
vue不通过路由直接获取url中参数的方法示例
Aug 24 Javascript
基于ionic实现下拉刷新功能
May 10 Javascript
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
JavaScript中引用vs复制示例详析
Dec 06 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
Jun 24 Javascript
JS实现吸顶特效
Jan 08 Javascript
基于redis的小程序登录实现方法流程分析
May 25 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
Sep 10 #Javascript
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 #Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 #Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 #Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 #Javascript
微信提示 在浏览器打开 效果实现过程解析
Sep 10 #Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
Sep 10 #Javascript
You might like
Adodb的十个实例(清晰版)
2006/12/31 PHP
PHP form 表单传参明细研究
2009/07/17 PHP
php数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
PHP实现的MD5结合RSA签名算法实例
2017/10/07 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
php输出反斜杠的实例方法
2019/09/19 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
Javascript中的delete介绍
2012/09/02 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
Vue-Router实现组件间跳转的三种方法
2017/11/07 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
vue获取form表单的值示例
2019/10/29 Javascript
微信小程序实现二维码签到考勤系统
2020/01/16 Javascript
vue实现员工信息录入功能
2020/06/11 Javascript
python PIL模块与随机生成中文验证码
2016/02/27 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
【python】matplotlib动态显示详解
2019/04/11 Python
Python中logging日志库实例详解
2020/02/19 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
CSS3实现各种图形的示例代码
2016/10/19 HTML / CSS
竞选村长演讲稿
2014/04/28 职场文书
低碳生活的宣传标语
2014/06/23 职场文书
我的梦想演讲稿1000字
2014/08/21 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
可怜妈妈观后感
2015/06/09 职场文书
个人收入证明范本
2015/06/12 职场文书
趣味运动会广播稿
2015/08/19 职场文书
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL