实现一个基本的用户,角色,菜单绑定的基本需求数据建模.先看er图,人员和用户,部门两张表绑定关联关系,同时用户和角色权限进行绑定,权限表和菜单进行绑定,这样,就可以得到该用户绑定的菜单,在菜单表中,父菜单id这一项关联有上一级菜单的菜单id,这样去体现菜单之间的关联关系,同时菜单表中的访问地址URL存放菜单对应的页面的url
在登录的时候,查询出该用户的菜单列表,并按树形结构排列起来,放入session中,这样,前台就能获得绑定的菜单数据,并根据菜单数据去显示菜单
其中将菜单列表转化为树形结构的数据的代码如下
List<TSysMenu> menuList = tSysMenuAdminService.getAllTSysMenuAdmin(null);//获得所有菜单 List<TSysMenu> topMenuList = l.getMenuList(menuList); request.getSession(true).setAttribute("menuList", topMenuList); public List<TSysMenu> getMenuList(List<TSysMenu> menuList) { List<TSysMenu> result = new ArrayList<TSysMenu>(); for(int i = menuList.size() - 1; i >= 0; i--){ if(menuList.get(i).getMenuParentId() == 1){ TSysMenu menu = menuList.get(i); result.add(menuList.get(i)); menuList.remove(i); nodeRecursion(menu,menuList); } } //二级菜单 return result; } /** * 初始化需要用的递归方法 * @param node 数的结点 * @param tList */ public void nodeRecursion(TSysMenu node, List<TSysMenu> tList){ List<TSysMenu> tsysMenuList = new ArrayList<TSysMenu>(); node.setChildren(tsysMenuList); for(int i=0;i<tList.size();i++){ if(tList.get(i) != null && tList.get(i).getMenuParentId().equals(node.getMenuId())){ TSysMenu node1=tList.get(i); tsysMenuList.add(node1); //tList.remove(i); //i--; nodeRecursion(node1,tList); } } }
前台的显示处理
前台jsp使用了三个iframe去处理,分为top,left,main,其中top放一级菜单,left放分支菜单,main中为菜单要跳转的页面
top菜单的生成用el表达式的foreach生成,left的菜单有jq去动态拼接html语句,在top菜单点击的同时去在left菜单页面动态去插入拼接好的html语句
代码如下
<!-- 一级菜单 --> <div class="headernav"> <div class="navchildmenu"> <ul id="menuList"> <c:forEach items="${menuList}" var="topMenu" varStatus="st"> <li tag="landMenu${st.index }"><a target='MainMenu' href="<c:choose><c:when test="${empty topMenu.menuHref}">javascript:void(0);</c:when><c:otherwise>${ctx }${topMenu.menuHref}</c:otherwise></c:choose>" onfocus="this.blur();">${topMenu.menuName}</a></li> </c:forEach> </ul> </div> </div> <!-- 左侧二级菜单 --> <div class="box3"> <c:forEach items="${menuList}" var="topMenu" varStatus="st"> <c:forEach items="${topMenu.children}" var="landMenu" varStatus="st2"> <div id="landMenu${st.index }_leftMenu${st2.index}" style="display: none;"> <dl> <dd> <div class="title"> <a href="<c:choose><c:when test="${empty landMenu.menuHref}">javascript:void(0);</c:when><c:otherwise>${ctx }${landMenu.menuHref}</c:otherwise></c:choose>" target="MainMenu"> <span><img src="${ctx}/static/images/system/leftico01.png" /></span>${landMenu.menuName} </a> </div> </dd> </dl> </div> </c:forEach> </c:forEach> </div>jq控制代码
$(".headernav div").show(); $("#menuList li").click(function() { var id = $(this).attr("tag"); var html = ""; $('div[id^='+id+']').each(function(){ //以id开始说有的元素 html+=$(this).html(); }); parent.LeftMenu.navMain.innerHTML = ""; parent.LeftMenu.navMain.innerHTML = html; parent.LeftMenu.menuClick(); }); //登录成功后的默认显示首页 var tag_first=$("#menuList li a")[0]; tag_first.click();