©2020-2024 ioDraw All rights reserved
最近遇到一个问题 需要给个人分权限查看不同的菜单
以前权限问题是定义一个数据库表 根据权限不同赋予不同的权限 从数据库获取菜单 比较灵活 所以就做了这个肯定有很多不足 希望可以和大家共同学习
技术：easyUi+spring+spingMvc+mybiatis
为什么要用easyui呢 因为简单易上手 而且他还有经典的三项布局 layout
这样可以省下自己很多的css布局 而且比较美观 比较符合一些管理系统的页面审美 里面有很多模板 如果大家有没有学习的 可以去看看 ！！
废话不多说：
菜单呢 是有分级的 分级最经典的布局就是Tree 就是树结构 所以呢 我们要一个树的model
private int id;
private String text; 树名
private String state = "open"; 是否展开
private boolean checked;是否勾选
private Map<String, Object> attributes = new HashMap<String,
Object>();其他信息 比如url
private List<TreeModel> children = new ArrayList<TreeModel>(); 子节点
然后有树形结构了 还没数据呢 没数据就没办法往前台传送数据 对不对 所以呢 我们要有一个存放数据的地方 这就是单数据
既然是菜单 数据 那么我们的数据里面的字段也很好建了
id URL title pid (父亲ID）`sort` '排序', `serials`
'层级',`rightPos`'权限位',`rightCode`'权限码'
基础数据已经准备好 接下来 我们要做的就是怎么读取数据库中的数据去在前台显示
我们要是在前台显示 而且还要根据自己的需求显示 比如我们做一个进销存管理系统 仓库管理 我们就让他显示采购 销售模块 系统设置 我们就要求显示修改密码
用户信息模块 所以我们怎么区分呢
这里我们就要从前台获取一个数据 <ul><li id="1">仓库管理</li><li id="2">系统管理</li></ul> 根据前台数据匹配数据
这里我们对应的菜单数据的最基础的一级菜单 id 就有了对应的id 1和2
$(function(){
//动态加载主菜单:二级菜单
$('.topmenu li').click(function(){
var id=$(this).children("a").attr("mId");
console.info(id);
$("#menu").attr("src","${pageContext.request.contextPath
}/menu?id="+id);
});
<ul class="topmenu">
<li><a href="#4" class="c5" mId="4"> <img
src="${pageContext.request.contextPath}/resources/images/icons/timg.jpg" />
<span>仓库管理</span></a></li>
而下面的子菜单的pid(父级菜单也有了数据）
既然前台传回了数据 那么我们后台是不是也要接受 所以我们要写一个controller接受
参数是不是应该有 Integer id,HttpServletRequest request 传后来id之后 我们是不是应该做查询了 根据这个id
查询他的下级菜单
我们查询出来数据是所有的二级菜单 因为一级菜单我们在前台已经赋值id了 所以 我们查询出来serials 等于0
的一级菜单然后根据id=pid查询出来二级菜单
查询出来的一级菜单我们一般情况下不会是一个 吧 所以我们要用list封装 list<菜单> 封装 然后for循环
tree set进去所有的一级菜单目录 然后根据一级菜单的id=pid 并且 serials =1查询出来二级菜单
同理 我们也这样查询出来三级 四级。。。
然后我们插入到tree里面 然后add list里面 就这样一级一级的循环
List<TreeModel> result = new ArrayList<TreeModel>();
TreeModel model = null;
//获取二级菜单和三级菜单
List<sysMenu> menuInfos = menumapper.findMenuInfos(parent);
for (sysMenu menu : menuInfos) {
if(!containtButton&&menu.getisButton()){//如果是按钮则
continue;
}
model = new TreeModel();
model.setId(menu.getId());
model.setText(menu.getTitle());
model.getAttributes().put("url", menu.getUrl());
// 计算孩子节点：下级菜单
sysMenu son = new sysMenu();
son.setpId(menu.getId());
son.setSerials(menu.getSerials() + 1);
//根据pid和Serials层级获取三级菜单
List<sysMenu> childrens = menumapper.findMenuInfos(son);
if (childrens.size() > 0) {
List<TreeModel> nbc = getChildrens(son,containtButton);
if(nbc.size()!=0){
model.setState("closed");
model.setChildren(nbc);
}
}
result.add(model);
model = null;
}
return result;
}
第二步：我们整理传过来的数据 传递到前台 我们封装到 list< 菜单>里面
request.setAttribute("menus",List<TreeModel>);
第三步 前台解析：
<c:forEach var="menu" items="${menus }">
<!-- 二级菜单 -->
<c:forEach var="node" items="${menu.children }">
<ph:rightFilter url="${node.attributes.url }">
<!-- 具有三级菜单 -->
<c:if test="${fn:length(node.children)>0 }">
<div class="menuitem">
<h5 id="menutitle-${node.id}"
style="background-image:url(${pageContext.request.contextPath}/resources/images/icons/system.png);">
${node.text }
</h5>
<div id = "menucon-${node.id}" class="mcon paperfold">
<ul>
<c:forEach var="n" items="${node.children }">
<ph:rightFilter url="${n.attributes.url }">
<li>
<a
href="${pageContext.request.contextPath }/${n.attributes.url }"
style="background-image:url(${pageContext.request.contextPath}/resources/images/icons/usermanager.png);"
target="mainFrame">${n.text
}</a>
</li>
</ph:rightFilter>
</c:forEach>
</ul>
</div>
</div>
<script type="text/javascript">
$('#menucon-${node.id}').paperfold({
'toggle': $("#menutitle-${node.id}"),
'folds': 2
});
</script>
</c:if>
<!-- 只有二级菜单 -->
<c:if test="${fn:length(node.children)==0 }">
<ph:rightFilter url="${node.attributes.url }">
<p><a href="${pageContext.request.contextPath
}/${node.attributes.url }" class="cs-navi-tab" target="mainFrame">${node.text
}</a></p>
</ph:rightFilter>
</c:if>
</ph:rightFilter>
</c:forEach>
</c:forEach>
这样我们就完整的获取了菜单栏 最后附上菜单栏显示结果