1.头部
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
2.css js引入路径格式
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/CSS/flex.css"/>
<script src="${pageContext.request.contextPath}/JS/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
3.body中需要加的内容
<input id="PageContext" type="hidden" value="${pageContext.request.contextPath}"/> //用于访问后台
4.循环
<c:forEach items="${pageBean.list}" var="orderData" varStatus="abc">
<tr>
<td>${(pageBean.pageNum-1)*pageBean.pageSize+abc.index+1}</td> <!-- 序号-->
<td class="orderNO">${orderData.orderNo}</td>
<td>${orderData.name}</td>
<td class="timeList" title="${orderData.createTime}"><fmt:formatDate value="${orderData.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/></td> <!-- 此处写法是针对后台返回这样的日期:createTime=Thu Nov 29 12:46:29 CST 2018,-->
<td class="state">
<c:if test="${orderData.state eq 1}">已登记</c:if>
<c:if test="${orderData.state eq 2}">已推送</c:if>
</td>
</tr>
</c:forEach>
<c:forEach items="${pageBean.list}" var="orderData" varStatus="abc">
<tr>
<td>${(pageBean.pageNum-1)*pageBean.pageSize+abc.index+1}</td>
<td class="orderNO">${orderData.orderNo}</td>
<td>${orderData.name}</td>
<td class="timeList inTime" title="">${orderData.inTime}</td> <!-- 此处写法是针对后台返回这样的日期:createTime=Tue Mar 12 14:54:35 CST 2019-->
<td class="state">
<c:if test="${orderData.state eq 1}">已登记</c:if>
<c:if test="${orderData.state eq 2}">已推送</c:if>
</td>
</tr>
</c:forEach>
map循环:
<c:forEach var="map" items="${application.list}" varStatus="abc">
<c:forEach var="productAndCount" items="${map}">
<div class="flex justifyBet recordDetail" data-pid='${productAndCount.key.productId}'>
<div class="xh_numList"></div>
<div>${productAndCount.key.productType.typeName}</div>
<div>${productAndCount.key.productCategory.categoryName}</div>
<div>${productAndCount.key.name}</div>
<div>${productAndCount.key.spec}</div>
<div>${productAndCount.value}</div>
</div>
</c:forEach>
</c:forEach>
后端返回不同数据 不同循环
返回data值如:
for(var i=0;i<data.list.length;i++){
var obj=data.list[i];
boxHtml+='<option value="'+obj.boxNo+'" data-state="'+obj.boxState+'">'+obj.boxNo+'</option>';
}
boxNo.append(boxHtml);
返回data值如:
var html = "";var dt="";
for(var v in data.permMap){
dt+='<dl class="mar10">'+
'<dt class="text-primary bolds">'+
'<input type="checkbox" name="check_all" class="check_all ver_align" autocomplete="off"/>'+
'<span>'+data.permMap[v][0].parentName+'</span>'+
'</dt>';
var dd='';
for(var i=0;i<data.permMap[v].length;i++){
var obj=(data.permMap[v])[i];
dd+='<div class="div_checks">'+
'<input type="checkbox" class="checks ver_align" value="'+obj.permissionId+'" name="checks" autocomplete="off"/>'+
'<span>'+obj.permissionName+'</span>'+
'</div>';
}
dt+='<dd class="flex wrap mar_lf18">'+dd+'</dd>'+'</dl>';
}
$("#dl_list").html(dt);