使用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学习笔记 操作jQuery对象 文档处理
Sep 19 Javascript
jQuery之ajax删除详解
Feb 27 Javascript
JavaScript Function函数类型介绍
Apr 08 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
在JS方法中返回多个值的方法汇总
May 20 Javascript
动态加载jQuery的两种方法实例分析
Jul 17 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
Oct 29 Javascript
全面了解JavaScript的数据类型转换
Jul 01 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
Nov 01 Javascript
JavaScript异步上传图片文件的实例代码
Jul 04 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 Javascript
避坑之 JavaScript 中的toFixed()和正则表达式
Apr 19 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获得当前的脚本网址
2007/12/10 PHP
php下把数组保存为文件格式的实例应用
2010/02/08 PHP
PHP把网页保存为word文件的三种方法
2014/04/01 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
js中iframe调用父页面的方法
2014/10/30 Javascript
jQuery $命名冲突解决方案汇总
2014/11/13 Javascript
关于javascript模块加载技术的一些思考
2014/11/28 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
jQuery实现鼠标滑过图片移动特效
2016/12/08 Javascript
jQuery实现动态文字搜索功能
2017/01/05 Javascript
es6学习之解构时应该注意的点
2017/08/29 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
vue设置导航栏、侧边栏为公共页面的例子
2019/11/01 Javascript
Python的gevent框架的入门教程
2015/04/29 Python
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
python多线程下信号处理程序示例
2019/05/31 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
高三体育教学反思
2014/01/29 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
保护动物的标语
2014/06/11 职场文书
勿忘国耻9.18演讲稿(经典篇)
2014/09/14 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
护理医院见习报告
2014/11/03 职场文书
2015清明节祭奠英烈寄语大全
2015/03/04 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
MySQL一些常用高级SQL语句
2021/07/03 MySQL