1. 程式人生 > >前端jsp頁面 列舉類 搜尋 和 查詢結果動態展示 (完全依賴介面 無需任何改動)

前端jsp頁面 列舉類 搜尋 和 查詢結果動態展示 (完全依賴介面 無需任何改動)

前端頁面 應對列舉類 搜尋  和 查詢結果展示 (完全依賴介面 無需任何改動)

 【問題現象產生】:後臺介面方提供的列舉型別總是變動,導致前端頁面如果寫死列舉型別,容易展示出問題(搜尋和查詢展示),具體就是少展示或多展示

 【問題應對方案】:採用前端頁面直接載入後臺介面的列舉類

<%@ page import="com....enums.VerifyStatusEnum" %>
<%@ page import="com....enums.OrderTypeEnum" %>

<!--搜尋的具體列舉型別 用於搜尋欄位點選搜尋按鈕後進行回顯-->
<c:set var='searchVerifyStatus' value="${queryForm.verifyStatus}" scope="page"/>
<!--用於搜尋展示欄位具體列舉類的個數-->
<c:set var="orderTypeSize" value="<%=OrderTypeEnum.values().length%>" scope="page"/>


<!--搜尋條件展示 寫法-->
<!--vse.code :VerifyStatusEnum列舉類的編碼 vse.desc :列舉類的描述-->
<div class="span" style="width:100px;">搜尋欄位名稱</div>
<div class="span" style="width:12%;">
    <select name="verifyStatus" id="verifyStatus" class="select">
        <option value="">&nbsp;</option>
        <c:forEach items="<%=VerifyStatusEnum.values()%>" var="vse">
            <option value="${vse.code}"  <c:if test="${vse.code == searchVerifyStatus}">selected</c:if> >${vse.desc}</option>
        </c:forEach>
    </select>
</div>


<!--搜尋結果展示 寫法-->
<!--搜尋結果展示 對應OrderTypeEnum列舉類 c:when 控制展示樣式 -->
<div class="block-fluid">
    <table class="table-hover" style="width: 100%">
        <thead>
        <tr>
            <th width="1%"><input id="df" type="checkbox" class="checkall"/></th>
            <th width="">搜尋結果展示欄位描述</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${queryModel.pageInfo.resultList}" var="receipt">
            <tr>
                <td class="TAC"><input type="checkbox" name="check[]" value="${receipt.id }"/></td>
                <td>
                    <div style="display: block">
                        <c:forEach items="<%=OrderTypeEnum.values()%>" var="ote" varStatus="status">
                            <c:if test="${receipt.orderType == ote.code}">
                                <c:choose>
                                    <c:when test="${(status.count % orderTypeSize) == 0 ? true : false}">
                                        <span class="label label-success">${ote.desc}</span>
                                    </c:when>
                                    <c:when test="${(status.count % orderTypeSize) == 1 ? true : false}">
                                        <span class="label label-info">${ote.desc}</span>
                                    </c:when>
                                    <c:when test="${(status.count % orderTypeSize) == 2 ? true : false}">
                                        <span class="label label-success">${ote.desc}</span>
                                    </c:when>
                                    <c:when test="${(status.count % orderTypeSize) == 3 ? true : false}">
                                        <span class="label label-warning">${ote.desc}</span>
                                    </c:when>
                                    <c:when test="${(status.count % orderTypeSize) == 4 ? true : false}">
                                        <span class="label label-important">${ote.desc}</span>
                                    </c:when>
                                    <c:otherwise>
                                        <span class="label label-info">${ote.desc}</span>
                                    </c:otherwise>
                                </c:choose>
                            </c:if>
                        </c:forEach>
                    </div>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>

注: 其中<c:set>用法 參考之前博文地址:地址