使用easyui的accordion及tree，根据用户角色加载相应的菜单，实现多角色用户的不同权限
1.数据库设计
主要依靠五个数据库完成
1）用户表
记录用户信息，其中字段为后台用户信息字段。
2）角色表
记录后台所有角色。
3）菜单表
记录系统菜单，主要字段有
4）用户角色表
记录每一个用户的角色信息，主要两个字段
用户id 角色id
5）角色菜单表
记录每一个角色拥有的菜单权限，主要两个字段
菜单id 角色id
2.HTML
<div region="west" split="true" title="导航栏" id="naver">
<div class="easyui-accordion" fit="true" id="navmenu">
</div>
</div>页面端首先内置一个accordion，注：accordion的id为navmenu，后面将会使用该id来动态加载菜单
3.后台
后台建立一个菜单的实体类，这个类记录menu的信息，前端向后台请求信息时，返回一个封装的menu的List的json数据，需要注意的是，需分别建立返回父菜单及子菜单的方法，父菜单方法返回该角色能够看到的所有一级菜单，子菜单返回指定父菜单下的所有二级菜单。
menu实体类:
package com.melon.haul.entity;
public class Menu {
private int id;
private String mName;
private int mParent;
private String mUrl;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getmName() {
return mName;
}
public void setmName(String mName) {
this.mName = mName;
}
public int getmParent() {
return mParent;
}
public void setmParent(int mParent) {
this.mParent = mParent;
}
public String getmUrl() {
return mUrl;
}
public void setmUrl(String mUrl) {
this.mUrl = mUrl;
}
@Override
public String toString() {
return "Menu [id=" + id + ", mName=" + mName + ", mParent=" + mParent
+ ", mUrl=" + mUrl + "]";
}
}
请求父菜单及子菜单方法：
@RequestMapping(value = "/getParentMenu", method = RequestMethod.POST)
private @ResponseBody
JSONObject getMenu(@RequestParam("type") String type) {
List<Menu> menuList = null;
try {
menuList = menuService.getParentMenu(Integer.parseInt(type));
} catch (Exception e) {
logger.error(e.getMessage(), e);
return DataUtil.arrayToJson(0, null, false, "get menu error");
}
return DataUtil.arrayToJson(menuList.size(), menuList, true, "get menu success");
}
@RequestMapping(value = "/getDetailMenu", method = RequestMethod.POST)
private @ResponseBody
JSONObject getDetailMenu(@RequestParam("type") String type,@RequestParam("mParentName") String mParentName) {
List<Menu> menuList = null;
try {
menuList = menuService.getDetailMenu(Integer.parseInt(type),mParentName);
} catch (Exception e) {
logger.error(e.getMessage(), e);
return DataUtil.arrayToJson(0, null, false, "get detail menu error");
}
return DataUtil.arrayToJson(menuList.size(), menuList, true, "get detail menu success");
}封装list为json的arrayToJson方法：
public static JSONObject arrayToJson(int totalCount, Object obj,boolean result,String error) {
// 如果数据集对象为null做个特殊处理
if(null == obj) {
JSONObject jsonResult = new JSONObject();
jsonResult.put("total", totalCount);
jsonResult.put("rows", new JSONArray());
return jsonResult;
}
JsonConfig config = new JsonConfig();
config.registerJsonValueProcessor(java.sql.Date.class,
new JsonValueProcessor() {
private SimpleDateFormat sd = new SimpleDateFormat(
"yyyy-MM-dd");
@Override
public Object processArrayValue(Object arg0, JsonConfig arg1) {
return null;
}
@Override
public Object processObjectValue(String arg0, Object arg1,
JsonConfig arg2) {
return arg1 == null ? "" : sd.format(arg1);
}
});
JSONArray jsonArray = JSONArray.fromObject(obj,config);
JSONObject jsonResult = new JSONObject();
jsonResult.put("total", totalCount);
jsonResult.put("rows", jsonArray);
jsonResult.put("success", false);
jsonResult.put("error", error);
if(result)
jsonResult.put("success", true);
jsonResult.put("data", jsonArray);
return jsonResult;
} 4.js端请求菜单数据及动态生成accordion及tree
请求父菜单：
//父菜单
$.ajax({
method : 'POST',
url : projectName
+ '/Menu/getParentMenu',
async : false,
dataType : 'json',
data : {
type:userType
},
success : function(data) {
console.log(data);
if(!data.success){
alert(data.data.msg);
}else{
var flag = true;
$.each(data.data,function(index,m){
console.log(m);
$('#navmenu').accordion('add',{
title:m.mName,
content: "<ul id='tree"+m.mName+"' ></ul>",
selected:flag
})
flag = false;
})
}
},
error : function() {
alert('error');
}
});其中，使用$each遍历所有取得数据，动态生成accordion：
$.each(data.data,function(index,m){
console.log(m);
//动态添加accordion
$('#navmenu').accordion('add',{
//title 设置为每一个请求到菜单的名字
title:m.mName,
//这里的content是为accordion下的tree预留，注意这里的id
content: "<ul id='tree"+m.mName+"' ></ul>",
selected:flag
})
//flag用来标志默认选中第一个菜单
flag = false;
})在点击accordion时，动态生成该节点下的子菜单
$('#navmenu').accordion({
//title是点击父菜单获得的父菜单名称,index是点击父菜单的父菜单节点索引，默认从0开始
onSelect:function(title,index){
console.log(title+" "+index);
//使用ajax请求指定菜单下的子菜单
$.ajax({
method : 'POST',
url : projectName
+ '/Menu/getDetailMenu',
async : false,
dataType : 'json',
data : {
mParentName:title,
type:userType
},
success : function(data) {
console.log(data)
//构造tree的data，data构造格式参考easyui官网tree的data格式
var dataJson = [];
$.each(data.data,function(index,m){
var j = {};
j.text = m.mName;
j.attributes={};
j.attributes.url = m.mUrl;
dataJson.push(j);
})
//动态添加tree
$("#tree" + title).tree({
data: dataJson,
onClick:function(node){
console.log(node);
var tabTitle = node.text;
var tabUrl = node.attributes.url;
if ($("#tt").tabs("exists", tabTitle)) { //判断该Tab页是否已经存在
$("#tt").tabs("select", tabTitle);
} else {
$("#tt").tabs("add", {
title : tabTitle,
href : tabUrl,
closable : true
});
}
// $("#navmenu .active").removeClass("active");
// node.parent().addClass("active");
}
});
},
error : function() {
alert('error');
}
});
}
})最终效果：
