三级菜单的实现
项目过程中,有客户要求三级菜单,现在原有二级菜单的基础上扩展。本文像素级记录扩展过程,备忘。
准备
找到修改的切入点。
${menu.name} 1. ${menuChild.name}
可以看出,2、3行el表达式定义了需要显示的菜单数据,下面的代码则是对这些数据按照层级进行显示处理。4、13行代码是具体的遍历操作,假如我们要显示第三级菜单,则需要在13行代码定义的循环中再加一层循环即获取二级菜单的子菜单并展示。
修改
具体修改过程和产出代码。
三级菜单和二级菜单的显示略有不同,现在默认把二级菜单加载为指向具体页面的a标签。添加三级标签,必须把二级菜单的加载为下拉列表,且不能默认加载为下拉列表(多数二级菜单下是没有三级菜单的)。
在这里,添加方法判断二级菜单是否拥有可显示子菜单(根据结果,确定二级菜单的加载方式,链接或者下拉列表):
${menuChild.name}@SuppressWarnings("unchecked")@Transientpublic boolean hasChild(String id){ boolean hasChild=false; Map map = Maps.newHashMap(); Subject subject = SecurityUtils.getSubject(); Principal principal = (Principal)subject.getPrincipal(); if(principal!=null){ map=principal.getCacheMap(); } List menuList = (List)map.get("menuList"); for (Menu menu : menuList) { if(menu.getIsShow().equals("1")&&menu.getParent()!=null&&id.equals(menu.getParentId())){ hasChild=true; break; } } return hasChild;}
三级菜单添加成功后,左侧菜单的宽度不足,根据需要调整左侧菜单iframe的宽度。
另外,假日三级菜单位于第一个二级菜单下,会出现右侧内容页空白,做以下修改:
原代码:
$(".accordion-body a:first i").click();
现代码:
if($(".accordion-body a:first").attr("href").indexOf("# collapse")==-1){ $(".accordion-body a:first i").click(); }else{ $(".myAccordion-body a:first i").click(); }
以上就是添加三级菜单的全过程,中间也经历了不少的波折,学习了不少el的用法。
关键字:前端开发
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!