WEB開發中前后台樹形菜單的展示設計

在WEB開發中經常需要進行樹形菜單的展示，本例通過不同角度的總結了如下三種實現方式：

1. 通過JS的遞歸實現前端菜單DOM的動態創建
2. 通過JSP的include指令結合JSTL表達式語言遞歸實現菜單的展示
3. 通過擴展JSP的標簽在后端實現菜單的DOM節點並響應給前端展示

針對第一種方法，可以采用JS的相關組件，或者使用JS的遞歸調用將服務端相應的數據組裝成DOM節點內容，動態添加到菜單的Container中，網上的例子較多，在此不再贅述，本例就后兩種方案進行講解。

通過JSP的include指令結合JSTL表達式語言遞歸實現菜單的展示

由於JSP中的JSTL不支持遞歸，又不想在JSP中加入Java腳本，可以采用JSP動態包含的方式組裝菜單，當前方案需要服務端將菜單列表組裝成樹形結構，具體算法如下：

主頁面menu.jsp

<ul class="nav nav-list">
   <c:if test="${not empty sessionScope.SESSION_MENUS}">
      <c:forEach items="${sessionScope.SESSION_MENUS }" var="menu">
          <%@include file="recursiveMenu.jsp"%>
      </c:forEach>
   </c:if>
</ul><!-- /.nav-list -->

遞歸調用頁面recursiveMenu.jsp

<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
<li>
  <c:choose>
      <c:when test="${empty menu.children }">
          <a href="${menu.url }">
             <i class="${menu.icon }"></i>
             <span class="menu-text"> ${menu.name } </span>
           </a>
      </c:when>
      <c:otherwise>
          <a href="javascript:void(0);" class="dropdown-toggle">
            <i class="${menu.icon }"></i>
            <span class="menu-text"> ${menu.name } </span>
            <b class="arrow icon-angle-down"></b>
            <ul class="submenu">
               <c:forEach items="${menu.children }" var="menu">
                   <c:set var="menu" value="${menu}" scope="request"/>
                   <jsp:include page="recursiveMenu.jsp"/>  
               </c:forEach>
             </ul>
          </a>
      </c:otherwise>
  </c:choose>
</li>

 

通過擴展JSP的標簽在后端實現菜單的DOM節點並相應給前端展示

當前方案采用擴展JSP標簽的方式實現具體實現方法如下

1、新建標簽實現類MenuTa.java

package com.luwei.console.mg.tag;

import java.io.IOException;
import java.util.List;

import javax.servlet.jsp.JspException;
import javax.servlet.jsp.tagext.TagSupport;

import org.apache.commons.lang.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import com.luwei.console.mg.constant.KeyConst;
import com.luwei.console.mg.entity.ext.MenuExt;

/**
 * <Description> 菜單標簽<br>
 * 
 * @author lu.wei<br>
 * @email [e-mail] <br>
 * @date 2016年12月25日 <br>
 * @since V1.0<br>
 * @see com.luwei.console.mg.tag <br>
 */
public class MenuTag extends TagSupport {
    private Logger logger = LoggerFactory.getLogger(this.getClass());

    /**
     * serialVersionUID <br>
     */
    private static final long serialVersionUID = -2755997672501044414L;

    @SuppressWarnings("unchecked")
    @Override
    public int doStartTag() throws JspException {
        Object menusObj = pageContext.getSession().getAttribute(KeyConst.KEY_SESSION_MENUS);
        if (null != menusObj) {
            List<MenuExt> menus = (List<MenuExt>) menusObj;
            String menuStr = assumbleMenuHtml(menus);
            try {
                pageContext.getOut().println(menuStr);
            }
            catch (IOException e) {
                logger.error("菜單標簽創建菜單出錯：{} ", e.getMessage(), e);
            }
        }
        return super.doStartTag();
    }

    /**
     * <Description> TODO<br>
     * 
     * @author lu.wei<br>
     * @email [e-mail] <br>
     * @date 2016年12月25日 上午9:29:26 <br>
     * @param menus
     * @return <br>
     */
    private String assumbleMenuHtml(List<MenuExt> menus) {
        StringBuffer sb = new StringBuffer("");

        if (!menus.isEmpty()) {
            long activeMenuId = 1;
            Object avtiveMenuIdObj = pageContext.getSession().getAttribute(KeyConst.SESSION_ACTIVE_MENU_ID);
            if (null != avtiveMenuIdObj) {
                activeMenuId = (Long) avtiveMenuIdObj;
            }
            for (MenuExt menu : menus) {

                if (menu.getId() == activeMenuId) {
                    sb.append("<li class='active'>");
                }
                else {
                    sb.append("<li>");
                }

                boolean hasChild = false;
                if (null != menu.getChildren() && !menu.getChildren().isEmpty()) {
                    hasChild = true;
                }
                if (hasChild) {
                    sb.append("<a href='#' class='dropdown-toggle'> ");
                }
                else {
                    String url = menu.getUrl();
                    if (StringUtils.isNotEmpty(url)) {
                        if (url.contains("?")) {
                            url = (url + "&mid=" + menu.getId());
                        }
                        else {
                            url = (url + "?mid=" + menu.getId());
                        }
                    }
                    sb.append("<a href='").append(url).append("'>");
                }

                if (StringUtils.isNotEmpty(menu.getIcon())) {
                    sb.append("<i class='").append(menu.getIcon()).append("'></i>");
                }
                sb.append("<span class='menu-text'>").append(menu.getName()).append("</span>");
                if (hasChild) {
                    sb.append("<b class='arrow icon-angle-down'></b>");
                }
                sb.append("</a>");
                if (hasChild) {
                    sb.append("<ul class='submenu'>").append(assumbleMenuHtml(menu.getChildren())).append("</ul>");
                }
                sb.append("</li>");
            }
        }
        return sb.toString();
    }
}

 

2、配置標簽

在項目的WEB-INFO目錄下新建文件treeMenuAssum.tld

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.1//EN"
 " http://java.sun.com/j2ee/dtds/web-jsptaglibrary_1_1.dtd">
<taglib>
    <tlibversion>1.0</tlibversion>
    <jspversion>1.2</jspversion>
    <shortname>menu</shortname>
    <uri>http://www.luwei.com/web/ext/menus</uri>
    <tag>
        <name>menu</name>
        <tagclass>com.luwei.console.mg.tag.MenuTag</tagclass>
    </tag>
</taglib>

 

3、使用菜單標簽

在JSP頁面中直接使用新建標簽

<%@ taglib prefix="menu" uri="http://www.luwei.com/web/ext/menus" %>  
<menu:menu/>   

 

總結

　　以上三種方式均能夠實現后端服務的配置管理的無限樹形菜單在前端顯示出來，第一種方法服務端只需要將數據組裝成前端需要的格式相應給前端，前端通過空間或者遞歸的方式動態創建DOM節點就可以了；二后兩種方式采用純Java相關的知識完全由服務端生成樹形菜單，服務端會有一定的負載，同時采用JSP動態包含的方式，如果是在菜單中存在復雜邏輯的話不容易實現，因此推薦使用第一和第三中方案。

　　具體采用哪種方式可以根據各自項目進行選擇，但是實現原理都是相同的。