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

 更新时间:2019年09月10日 16:40:42   作者:Inverse_fang  
今天小编就为大家分享一篇使用layui+ajax实现简单的菜单权限管理及排序的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

先看数据库设计:**

user表:

role表:

menu表:

user_role表:

role_menu表:

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

sql查询结果:

前台数据处理方法:

//菜单循环遍历打印拼接操作
  $(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是默认排序

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

将order设置为一结果如图:

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

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中null与undefined分析

    JavaScript中null与undefined分析

    JavaScript null undefined分析
    2009-07-07
  • JS实现倒计时和文字滚动的效果实例

    JS实现倒计时和文字滚动的效果实例

    这篇文章主要介绍了JS实现倒计时和文字滚动的效果,以实例的形式分析了倒计时与文字滚动效果的具体实现方法,并附有js时间变量的说明,非常具有实用价值,需要的朋友可以参考下
    2014-10-10
  • JavaScript创建对象的常用方式总结

    JavaScript创建对象的常用方式总结

    这篇文章主要介绍了JavaScript创建对象的常用方式,结合实例形式总结分析了javascript面向对象程序设计中对象创建的常见方式、相关操作技巧与注意事项,需要的朋友可以参考下
    2018-08-08
  • 详解JS设计模式之桥接模式用法

    详解JS设计模式之桥接模式用法

    javascript桥接桥接设计模式(Bridge Pattern)是一种结构型设计模式,它用于将抽象部分与其具体实现部分分离,使它们可以独立地变化,本文将通过代码示例详解的给大家介绍一下JS桥接模式,需要的朋友可以参考下
    2023-08-08
  • 微信小程序列表中item左滑删除功能

    微信小程序列表中item左滑删除功能

    这篇文章主要介绍了微信小程序列表中item左滑删除功能,本文分步骤给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • 使用JavaScript监视有没有被刷新后跳转其他页面

    使用JavaScript监视有没有被刷新后跳转其他页面

    这篇文章主要为大家详细介绍了如何使用JavaScript监视有没有被刷新后跳转其他页面,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下
    2025-01-01
  • Javascript 作用域使用说明

    Javascript 作用域使用说明

    在传统的面向对象程序设计中,主要关注于公用和私有作用域。公用作用域中的对象属性可以从对象外部访问,即开发者创建对象的实例后,就可使用它的公用属性。
    2009-08-08
  • three.js实现炫酷的全景3D重力感应

    three.js实现炫酷的全景3D重力感应

    这篇文章主要为大家详细介绍了three.js实现炫酷的全景3D重力感应,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • javascript框架设计读书笔记之种子模块

    javascript框架设计读书笔记之种子模块

    本文是司徒正美的《javascript框架设计》一书第一章种子模块的读书笔记,记录了一下自认为比较重要的东西,分享给大家
    2014-12-12
  • 优化javascript的执行速度

    优化javascript的执行速度

    这个是我在网上找的资料,具体的出处,我已经记不清楚了,觉得很不错,就和大家分享了
    2010-01-01

最新评论