三级菜单的实现

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

准备

找到修改的切入点。

如上图，项目是左右iframe布局的，菜单部分在左侧。
找到index.jsp,跟踪left iframe的请求，跳转到menuTree.jsp。

分析

确定修改思路。

menuTree.jsp展现菜单的代码如下：

    <div class="accordion" id="menu">
        <c:set var="menuList" value="${fns:getMenuList()}"/>
        <c:set var="firstMenu" value="true"/>
        <c:forEach items="${menuList}" var="menu" varStatus="idxStatus">
            <c:if test="${menu.parent.id eq (not empty param.parentId?param.parentId:'1')&&menu.isShow eq '1'}">
                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#menu" href="#collapse${menu.id}" title="${menu.remarks}"><i class="icon-chevron-${firstMenu?'down':'right'}"></i>&nbsp;${menu.name}</a>
                    </div>
                    <div id="collapse${menu.id}" class="accordion-body collapse ${firstMenu?'in':''}">
                        <div class="accordion-inner">
                            <ul class="nav nav-list">
                                <c:forEach items="${menuList}" var="menuChild">
                                    <c:if test="${menuChild.parent.id eq menu.id&&menuChild.isShow eq '1'}">
                                        <li>
                                            <a href="${fn:indexOf(menuChild.href, '://') eq -1?ctx:''}${not empty menuChild.href?menuChild.href:'/404'}" target="${not empty menuChild.target?menuChild.target:'mainFrame'}" ><i class="icon-${not empty menuChild.icon?menuChild.icon:'circle-arrow-right'}"></i>&nbsp;${menuChild.name}</a>
                                        </li>
                                        <c:set var="firstMenu" value="false"/>
                                    </c:if>
                                </c:forEach>
                            </ul>
                        </div>
                    </div>
                </div>
            </c:if>
        </c:forEach>
    </div>

可以看出，2、3行el表达式定义了需要显示的菜单数据，下面的代码则是对这些数据按照层级进行显示处理。4、13行代码是具体的遍历操作，假如我们要显示第三级菜单，则需要在13行代码定义的循环中再加一层循环即获取二级菜单的子菜单并展示。

修改

具体修改过程和产出代码。

三级菜单和二级菜单的显示略有不同，现在默认把二级菜单加载为指向具体页面的a标签。添加三级标签，必须把二级菜单的加载为下拉列表，且不能默认加载为下拉列表（多数二级菜单下是没有三级菜单的）。
在这里，添加方法判断二级菜单是否拥有可显示子菜单(根据结果，确定二级菜单的加载方式，链接或者下拉列表)：

                                            <c:set var="hasChild" value="${menuChild.hasChild(menuChild.id)}"></c:set>
                                            <c:if test="${hasChild eq 'false'}">
                                                <a href="${fn:indexOf(menuChild.href, '://') eq -1?ctx:''}${not empty menuChild.href?menuChild.href:'/404'}" target="${not empty menuChild.target?menuChild.target:'mainFrame'}" >
                                                    <i class="icon-${not empty menuChild.icon?menuChild.icon:'circle-arrow-right'}"></i>&nbsp;${menuChild.name}
                                                </a>
                                                <c:set var="firstMenu" value="false"/>
                                            </c:if>

    @SuppressWarnings("unchecked")
    @Transient
    public boolean hasChild(String id){
        boolean hasChild=false;
        Map<String, Object> map = Maps.newHashMap();
        Subject subject = SecurityUtils.getSubject();
        Principal principal = (Principal)subject.getPrincipal();
        if(principal!=null){
            map=principal.getCacheMap();
        }
        List<Menu> menuList = (List<Menu>)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的用法。