基于Layui与Ajax的简易菜单权限及排序实现

作者:索引拾光时间:2026-10-23 11:00:02浏览:205

本文介绍如何使用Layui框架结合Ajax技术,在不依赖ztree插件的情况下,实现简单的一二级菜单权限控制与排序功能。通过设计user、role、menu等数据库表,利用SQL多表关联查询获取菜单数据,并在前端通过JavaScript动态拼接DOM结构。同时,通过role_menu表中的status字段控制不同角色的菜单可见性,并支持通过order字段调整菜单显示顺序。

Layui菜单权限与排序实现概述

本示例采用Layui框架,未使用其ztree插件,仅通过Ajax配合SQL语句实现基础的一二级菜单权限控制及排序功能。

数据库表结构设计

首先查看数据库设计方案:

user表结构如下:

Layui菜单权限与排序实现概述

role表结构如下:

Layui菜单权限与排序实现概述

menu表结构如下:

Layui菜单权限与排序实现概述

user_role表结构如下:

Layui菜单权限与排序实现概述

role_menu表结构如下:

Layui菜单权限与排序实现概述

在menu表中,id仍为主键,新增mid字段表示菜单ID,pare_menu_id表示父级菜单ID(即mid)。若无父级,则pare_menu_id为0,代表一级菜单。此处规定一级菜单的mid必须为整千数或整万数,其子菜单的mid需满足在mid+999的范围内。

SQL查询结果示例如下:

Layui菜单权限与排序实现概述

前端数据处理与排序逻辑

前端数据处理逻辑如下:


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

Layui菜单权限与排序实现概述

接下来,我们将“用户管理”菜单调整至第一位,具体操作见图。

Layui菜单权限与排序实现概述

将order字段设置为1后,结果如图:

Layui菜单权限与排序实现概述

此时,“用户管理”已成功移至列表首位。

后端SQL查询与权限控制

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,通过多表关联查询即可获取数据(本项目采用SpringMVC+MyBatis+HTML架构)。

关于权限控制,不同用户看到的菜单内容应有所区别。在role_menu表中增加了status字段,默认值为0;admin用户的status为1。由于为每个角色单独授权菜单较为繁琐,因此采取统一赋予权限的方式,仅通过status字段进行状态控制。即添加新菜单时,除admin外,其他角色在role_menu表中对应的记录status均为0。

以上即为使用Layui结合Ajax实现简易菜单权限管理及排序的完整内容,供参考。

作者最新文章