三级菜单的实现

项目过程中，有客户要求三级菜单，现在原有二级菜单的基础上扩展。本文像素级记录扩展过程，备忘。

准备

找到修改的切入点。

                     ${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的用法。

关键字：前端开发

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！