本文介绍如何使用Layui框架结合Ajax技术，在不依赖ztree插件的情况下，实现简单的一二级菜单权限控制与排序功能。通过设计user、role、menu等数据库表，利用SQL多表关联查询获取菜单数据，并在前端通过JavaScript动态拼接DOM结构。同时，通过role_menu表中的status字段控制不同角色的菜单可见性，并支持通过order字段调整菜单显示顺序。
Layui菜单权限与排序实现概述
本示例采用Layui框架，未使用其ztree插件，仅通过Ajax配合SQL语句实现基础的一二级菜单权限控制及排序功能。
数据库表结构设计
首先查看数据库设计方案：
user表结构如下：
role表结构如下：
menu表结构如下：
user_role表结构如下：
role_menu表结构如下：
在menu表中，id仍为主键，新增mid字段表示菜单ID，pare_menu_id表示父级菜单ID（即mid）。若无父级，则pare_menu_id为0，代表一级菜单。此处规定一级菜单的mid必须为整千数或整万数，其子菜单的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'>"+' '+data[j].menuName+"</a>"
menu += "</dd>"
menu += "</dl>"
}
}
}
menu += "</li>";
}
$("#nav").html(menu);
var element = layui.element;
element.init()//初始化element事件，使菜单展开
}
});
})最终效果展示如下：
图1显示的是默认排序状态。
接下来，我们将“用户管理”菜单调整至第一位，具体操作见图。
将order字段设置为1后，结果如图：
此时，“用户管理”已成功移至列表首位。
后端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实现简易菜单权限管理及排序的完整内容，供参考。