前端jsp頁面 列舉類 搜尋 和 查詢結果動態展示 (完全依賴介面 無需任何改動)
阿新 • • 發佈:2018-11-10
前端頁面 應對列舉類 搜尋 和 查詢結果展示 (完全依賴介面 無需任何改動)
【問題現象產生】:後臺介面方提供的列舉型別總是變動,導致前端頁面如果寫死列舉型別,容易展示出問題(搜尋和查詢展示),具體就是少展示或多展示
【問題應對方案】:採用前端頁面直接載入後臺介面的列舉類
<%@ 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=""> </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>用法 參考之前博文地址:地址