使用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的试卷自动排版系统实现代码
Jan 06 Javascript
给jQuery方法添加回调函数一款插件的应用
Jan 21 Javascript
提交表单时执行func方法实现代码
Mar 17 Javascript
Jquery获得控件值的三种方法总结
Feb 13 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 Javascript
手机Web APP如何实现分享多平台功能
Aug 19 Javascript
jQuery实现一个简单的轮播图
Feb 19 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
JavaScript的Proxy可以做哪些有意思的事儿
Jun 15 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
Jul 12 Javascript
js异步接口并发数量控制的方法示例
Nov 22 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
黑夜路人出的几道php笔试题
2009/08/04 PHP
PHP中使用Imagick实现各种图片效果实例
2015/01/21 PHP
php简单实现快速排序的方法
2015/04/04 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
thinkphp5 模型实例化获得数据对象的教程
2019/10/18 PHP
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
PHP和NodeJs开发的应用如何共用Session
2015/04/16 NodeJs
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
JavaScript中的toUTCString()方法使用详解
2015/06/12 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
Vue 进阶之路(三)
2019/04/18 Javascript
python错误处理详解
2014/09/28 Python
Python实现简单的代理服务器
2015/07/25 Python
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
视觉直观感受若干常用排序算法
2017/04/13 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
python 寻找离散序列极值点的方法
2019/07/10 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
德国50岁以上交友网站:Lebensfreunde
2020/03/18 全球购物
初中毕业典礼演讲稿
2014/09/09 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
金榜题名主持词
2015/07/02 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书
Python控制台输出俄罗斯方块的方法实例
2021/04/17 Python