三級菜單的實現

項目過程當中，有客戶要求三級菜單，如今原有二級菜單的基礎上擴展。本文像素級記錄擴展過程，備忘。

準備

找到修改的切入點。

如上圖，項目是左右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>

能夠看出，二、3行el表達式定義了須要顯示的菜單數據，下面的代碼則是對這些數據按照層級進行顯示處理。四、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的用法。