使用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 相关文章推荐
Jquery 表单取值赋值的一些基本操作
Oct 11 Javascript
jQuery与其它库冲突的解决方法
Jun 25 Javascript
JS跨域问题详解
Nov 25 Javascript
原生js实现下拉框功能(支持键盘事件)
Jan 13 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
vue定义全局变量和全局方法的方法示例
Aug 01 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 Javascript
javascript关于“时间”的一次探索
Jul 24 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 Javascript
微信小程序轮播图swiper代码详解
Dec 01 Javascript
echarts饼图各个板块之间的空隙如何实现
Dec 01 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
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
[原创]图片分页查看
2006/08/28 Javascript
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
实例讲解jquery中mouseleave和mouseout的区别
2016/02/17 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
Node.js console控制台简单用法分析
2019/01/04 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
2019/11/13 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
JavaScript实现多个物体同时运动
2020/03/12 Javascript
JS canvas实现画板和签字板功能
2021/02/23 Javascript
python 数据加密代码
2008/12/24 Python
python正则表达式修复网站文章字体不统一的解决方法
2013/02/21 Python
Python random模块(获取随机数)常用方法和使用例子
2014/05/13 Python
python中MySQLdb模块用法实例
2014/11/10 Python
Python实现把回车符\r\n转换成\n
2015/04/23 Python
python使用mysql数据库示例代码
2017/05/21 Python
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
python根据多个文件名批量查找文件
2019/08/13 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
python GUI模拟实现计算器
2020/06/22 Python
英国最大的运动营养公司之一:LA Muscle
2018/07/02 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
会计专业毕业自荐书范文
2014/02/08 职场文书
信用卡工资证明格式
2014/09/13 职场文书
2016年春节慰问信息大全
2015/11/30 职场文书
远程教育学习心得体会
2016/01/23 职场文书
详解MySQL的半同步
2021/04/22 MySQL
Python图像处理之图像拼接
2021/04/28 Python
SpringAop日志找不到方法的处理
2021/06/21 Java/Android