动态展示菜单项思路:
- 用户里面包含角色id,角色和菜单多对多,
- 要么根据用户id查到用户包含的菜单项在展示页面遍历,要么根据角色id在 页面做判断是否展示或隐藏
三个示例,如果在此页面看着不舒服,建议复制到idea观看
1.前后端不分离,servlet+jsp,在servlet(相当于控制层)存储用户的信息,包含角色和菜单列表(此示例包含二级菜单,需要在service层将用户菜单根据数据库菜单等级分好级,在servlet存的是一个分好级的菜单)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv=content-type content="text/html; charset=utf-8" />
<link href="css/admin.css" type="text/css" rel="stylesheet" />
<script language=javascript>
function expand(el)
{
childobj = document.getElementById("child" + el);
if (childobj.style.display == 'none')
{
childobj.style.display = 'block';
}
else
{
childobj.style.display = 'none';
}
return;
}
</script>
</head>
<body background=img/menu_bg.jpg >
<table height="100%" cellspacing=0 cellpadding=0 width=170 background=./img/menu_bg.jpg border=0>
<tr>
<td valign=top align=middle>
<table cellspacing=0 cellpadding=0 width="100%" border=0>
<tr>
<td height=10></td>
</tr>
</table>
<c:forEach items="${user.role.list1}" var="m">
<table cellspacing=0 cellpadding=0 width=150 border=0>
<tr height=22>
<td style="padding-left: 30px" background=./img/menu_bt.jpg>
<a class=menuparent onclick=expand(${
m.menuid}) href="javascript:void(0);">${
m.menuname}</a>
</td>
</tr>
<tr height=4>
<td></td>
</tr>
</table>
<table id=child${
m.menuid} style="display: none" cellspacing=0 cellpadding=0 width=150 border=0>
<c:forEach items="${m.menuListSecond}" var="m2">
<tr height=20>
<td align=middle width=30>
<img height=9 src="./img/menu_icon.gif" width=9>
</td>
<td>
<a class=menuchild href="${m2.url}" target="right">${
m2.menuname}</a>
</td>
</tr>
</c:forEach>
<tr height=4>
<td colspan=2></td>
</tr>
</table>
</c:forEach>
</td>
<td width=1 bgcolor=#d1e6f7></td>
</tr>
</table>
</body>
</html>
示例2:根据登陆用户角色展示或隐藏(是快递员就展示快递助手,是普通用户就隐藏)
$(function(){
$.getJSON("/wx/showmenus.do",null,function (data) {
if (data.status!=1){
$("#helper").css("display","none");
/*或$("#helper").hide();*/
$("#text").css("display","none");
}
})
示例3:一个基于BUI实现菜单项动态展示的示例页面,此页面包含原页面(亦被注释掉)和更改后的代码,义工加深理解写法,需要数据库的菜单地址,菜单名,菜单id
<!DOCTYPE HTML>
<html>
<head>
<title>枣阳市第二人民医院信息管理系统</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/bui-min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/main-min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../Js/jquery.js"></script>
<script src="/Js/layer.js"></script>
</head>
<script>
$(function () {
String.prototype.GetValue= function(para) {
let reg = new RegExp("(^|&)"+ para +"=([^&]*)(&|$)");
let r = this.substr(this.indexOf("\?")+1).match(reg);
if (r!=null) return unescape(r[2]); return null;
}
loadUser();
})
</script>
<script>
function loadUser() {
let url = document.location.toString();
let userid=url.GetValue("userid");
let loginname=url.GetValue("loginname");
var roleid=url.GetValue("roleid");
$("#loginname").html(loginname);
$("#userid").val(userid);
$.ajax({
type: "GET",
url: "/menu/"+roleid,
data:"",
dataType: "json",
success: function (msg) {
if (msg.code==200){
var list = msg.list;
var config2=[];
for (let i = 0; i < list.length; i++) {
var menuid = list[i].menuid;
var menuname=list[i].menuname;
var menuurl= list[i].menuurl;
var menustate=list[i].menustate;
if (menustate==0){
var item = {
id:menuid,text:menuname,href:menuurl}
config2.push(item)
}
}
var config = [{
id: '1', menu: [{
text: '快速通道', items: config2
}]
}];
BUI.use('common/main',function() {
new PageUtil.MainPage({
modulesConfig: config
});
})
}
}
})
}
function loginOut() {
$.ajax({
type: "POST",
url: "/loginOut/",
data: "_method=PUT",
dataType: "json",
success: function (msg) {
window.location.href="/login.html"
layer.msg(msg.msg)
}
})
}
</script>
<body>
<!--<div class="header">
<div class="dl-title">
<img src="/chinapost/Public/assets/img/top.png">
</div>
<div class="dl-log">欢迎您，<span class="dl-log-user">张三</span><a href="/chinapost/index.php?m=Public&a=logout" title="退出系统" class="dl-log-quit">[退出]</a>
</div>
</div>-->
<div class="content">
<div class="dl-main-nav">
<div class="dl-inform"><div class="dl-inform-title"><s class="dl-inform-icon dl-up"></s></div></div>
<ul id="J_Nav" class="nav-list ks-clear" style="float:left">
<!--<li class="nav-item dl-selected"><div class="nav-item-inner nav-home">信息采编系统</div></li>-->
<li style=" color:#fff; font-size:20px; margin-top:10px; margin-left:20px;">山东省第二人民医院管理平台</li>
</ul>
<input type="hidden" id="userid">
<div style="float:right; color:#fff;">欢迎您，<span class="dl-log-user" id="loginname">张三</span><a title="退出系统" class="dl-log-quit" id="exit" onclick="loginOut()">[退出]</a></div>
</div>
<ul id="J_NavContent" class="dl-tab-conten">
</ul>
</div>
<script type="text/javascript" src="assets/js/jquery-1.6.js"></script>
<script type="text/javascript" src="assets/js/bui.js"></script>
<script type="text/javascript" src="assets/js/common/main-min.js"></script>
<script type="text/javascript" src="assets/js/config-min.js"></script>
<!--
<script>
BUI.use('common/main',function(){
var config = [
{
id:'1',menu:[
{
text:'快速通道',items:[
{
id:'2',text:'挂号信息管理',href:'registration/index.html'},
{
id:'5',text:'住院办理',href:'hospital/index.html'},
{
id:'8',text:'住院结算',href:'hospital/account.html'},
{
id:'7',text:'在院发药',href:'hospital/dispensing.html'},
{
id:'4',text:'药品管理',href:'medicine/index.html'},
{
id:'16',text:'检查收费项目登记',href:'hospital/charge2.html'},
{
id:'6',text:'收费项目管理',href:'hospital/charge.html'},
/** 扩展
{id:'9',text:'月营业额统计',href:''},
{id:'10',text:'年营业额统计',href:''},
**/
{
id:'3',text:'门诊医生管理',href:'doctor/index.html'},
{
id:'11',text:'用户管理',href:'User/index.html'},
{
id:'12',text:'角色管理',href:'Role/index.html'},
{
id:'13',text:'资源管理',href:'Resource/index.html'},
{
id:'13',text:'密码管理',href:'User/password.html'}
]}
]}
];
new PageUtil.MainPage({
modulesConfig : config
});
});
</script>
-->
</body>
</html>
整理不易,看到了点个赞吧