数据表的建立
- roleinfo表->>用户表
- menu表->>菜单表
- role_menu表->>用户菜单中间表
mybatis(mysql)的实现
<resultMap id="menuInfoMap" type="com.background.dto.MenuInfoDto">
<id column="gid" property="id"></id>
<result column="gname" property="name"></result>
<result column="gpath" property="url"></result>
<result column="gicon" property="icon"></result>
<result column="gpid" property="pid"></result>
<result column="checked" property="checked" ></result>
<collection property="children" ofType="com.background.dto.MenuInfoDto">
<id column="fid" property="id"></id>
<result column="fname" property="name"></result>
<result column="fpath" property="url"></result>
<result column="ficon" property="icon"></result>
<result column="fpid" property="pid"></result>
<result column="checked" property="checked" ></result>
<collection property="children" ofType="com.background.dto.MenuInfoDto">
<id column="menuId" property="id"></id>
<result column="menuName" property="name"></result>
<result column="menuPath" property="url"></result>
<result column="menuIcon" property="icon"></result>
<result column="parentId" property="pid"></result>
<result column="checked1" property="checked" ></result>
</collection>
</collection>
</resultMap>
<select id="getMenuInfos" resultMap="menuInfoMap" parameterType="int">
SELECT tbl.*,rm.status checked,NULLIF(tbl.menuId and rm.status,null) checked1 from role_menu rm
right JOIN(SELECT * from (SELECT m1.menuId gid,m1.menuname gname,m1.parentId gpid,m1.menuicon gicon,m1.menupath gpath, m2.menuId fid,m2.menuname fname,m2.parentId fpid,m2.menuicon ficon,m2.menupath fpath
from menu m1,menu m2 where m1.parentId=0 and m2.parentId=m1.menuId)
tal LEFT JOIN menu m3 on tal.fid=m3.parentId) as tbl on (rm.menuid=tbl.menuid and rm.roleId=#{roleId}) or (rm.menuId=tbl.fid and tbl.menuId is null and rm.roleId=#{roleId})
</select>
controler层
postman测试
- json
最后会生成如下的json
[
{
"id": 1,
"pid": 0,
"seqno": 0,
"name": "系统权限管理",
"url": null,
"icon": null,
"open": true,
"checked": true,
"children": [
{
"id": 2,
"pid": 1,
"seqno": 0,
"name": "控制面板",
"url": null,
"icon": null,
"open": true,
"checked": true,
"children": []
},
{
"id": 3,
"pid": 1,
"seqno": 0,
"name": "消息管理",
"url": null,
"icon": null,
"open": true,
"checked": true,
"children": []
},
{
"id": 4,
"pid": 1,
"seqno": 0,
"name": "权限管理",
"url": null,
"icon": null,
"open": true,
"checked": true,
"children": [
{
"id": 8,
"pid": 4,
"seqno": 0,
"name": "用户管理",
"url": null,
"icon": null,
"open": true,
"checked": true,
"children": null
},
{
"id": 9,
"pid": 4,
"seqno": 0,
"name": "角色管理",
"url": null,
"icon": null,
"open": true,
"checked": true,
"children": null
},
{
"id": 10,
"pid": 4,
"seqno": 0,
"name": "许可管理",
"url": null,
"icon": null,
"open": true,
"checked": true,
"children": null
}
]
},
{
"id": 5,
"pid": 1,
"seqno": 0,
"name": "资质管理",
"url": null,
"icon": null,
"open": true,
"checked": false,
"children": [
{
"id": 11,
"pid": 5,
"seqno": 0,
"name": "分类管理",
"url": null,
"icon": null,
"open": true,
"checked": false,
"children": null
},
{
"id": 12,
"pid": 5,
"seqno": 0,
"name": "资质管理",
"url": null,
"icon": null,
"open": true,
"checked": true,
"children": null
}
]
},
{
"id": 6,
"pid": 1,
"seqno": 0,
"name": "流程管理",
"url": null,
"icon": null,
"open": true,
"checked": false,
"children": []
},
{
"id": 7,
"pid": 1,
"seqno": 0,
"name": "审核管理",
"url": null,
"icon": null,
"open": true,
"checked": true,
"children": [
{
"id": 13,
"pid": 7,
"seqno": 0,
"name": "实名认证人工审核",
"url": null,
"icon": null,
"open": true,
"checked": true,
"children": null
}
]
}
]
}
]
前端用ztree树插件实现,ajson请求json导入ztree上,生成一个树形菜单
<script src="ztree/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript">
$(function () {
$(".list-group-item").click(function(){
if ( $(this).find("ul") ) {
$(this).toggleClass("tree-closed");
if ( $(this).hasClass("tree-closed") ) {
$("ul", this).hide("fast");
} else {
$("ul", this).show("fast");
}
}
});
var setting = {
check : {
enable : true
},
view: {
selectedMulti: false,
addDiyDom: function(treeId, treeNode){
var icoObj = $("#" + treeNode.tId + "_ico"); // tId = permissionTree_1, $("#permissionTree_1_ico")
if ( treeNode.icon ) {
icoObj.removeClass("button ico_docu ico_open").addClass("fa fa-fw " + treeNode.icon).css("background","");
}
},
},
async: {
enable: true,
url:"tree.txt",
autoParam:["id", "name=n", "level=lv"]
},
callback: {
onClick : function(event, treeId, json) {
}
}
};
var search = location.search;
var string = search.split("=")[1];
$.ajax({
async: false,
cache: false,
traditional: true,
type: "POST",
url: "getMenuInfo",
contentType: "application/json;charset=utf-8",
data: JSON.stringify({
"roleId":string
}),
success:function(text){
$.fn.zTree.init($("#treeDemo"), setting, text);
},
error: function (text) {
},
dataType: "json"
});
});
</script>