前端页面 应对枚举类 搜索 和 查询结果展示 (完全依赖接口 无需任何改动)
【问题现象产生】:后台接口方提供的枚举类型总是变动,导致前端页面如果写死枚举类型,容易展示出问题(搜索和查询展示),具体就是少展示或多展示
【问题应对方案】:采用前端页面直接加载后台接口的枚举类
<%@ 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>用法 参考之前博文地址:地址