背景：最近發現自己的前臺真的不怎麼樣，樣式的調整還可以，但是對於前後臺傳值還有循環真的是不怎麼滴，不熟練甚至是不會，對於不熟練的東西，說明你上升的空間很大，好好學習哦。
一、Tap頁顯示錶格
jsp
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<body>
<ul class="nav nav-tabs">
<li id="tab3" class="active"><a href="${ctx}/sys/uploadPictorial/manuscriptList">手稿列表</a></li>
</ul>
<table id="manuscripTable" class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th>題目</th>
<th>作者</th>
<th>起始頁</th>
<th>結束頁</th>
<th>密級</th>
<th>操作</th>
</thead>
<tbody>
<c:forEach items="${manuscriptList}" var="manuscriptList">
<tr>
<td>${manuscriptList.title}</td>
<td>${manuscriptList.author}</td>
<td>${manuscriptList.pgStart}</td>
<td>${manuscriptList.pgStop}</td>
<td>${manuscriptList.securityLevel}</td>
<c:choose>
<c:when test="${manuscriptList.securityLevel=='First'}">
<td>等級一</td>
</c:when>
<c:when test="${manuscriptList.securityLevel=='Second'}">
<td>等級二</td>
</c:when>
<c:when test="${manuscriptList.securityLevel=='Third'}">
<td>等級三</td>
</c:when>
<c:when test="${manuscriptList.securityLevel=='Fourth'}">
<td>等級四</td>
</c:when>
</c:choose>
<td>
<a href="${ctx}/sys/uploadPictorial/manuscriptList?id=${pictorialList.id}">查看</a>
<a href="${ctx}/sys/uploadPictorial/manuscriptList?id=${pictorialList.id}">編輯</a>
<a href="${ctx}/sys/uploadPictorial/deleteManuscrip?id=${manuscriptList.id}">刪除</a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</body>
controller
@RequestMapping(value = "manuscriptList")
public String manuscriptList(HttpServletRequest request,HttpServletResponse response,ManuscriptInfo manuscriptInfo, Model model) {
String pictorialId=request.getParameter("pictorialId");
model.addAttribute("manuscriptList", manuscriptService.findListByPictorialId(pictorialId));
return "mimp/sys/uploadPictorial/manuscriptList";
}二、使用Ajax動態拼接表格
JSP
function RefreshForm(){
var pictorialId = '5099df0397134edaabe6e5c1e48e2194';
var pgStart = '66';
$.ajax({
//提交數據的類型 POST GET
type:"POST",
//async:false,
//提交的網址
url:"${ctx}/sys/uploadPictorial/manuscriptSubList",
data:{"pictorialId":pictorialId,"pgStart":pgStart},
//返回數據的格式
datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
//成功返回之後調用的函數
success: function(data){
var strHtml="";
for(var i=0;i<data.length;i++){
if(data[i].title.length>18){
strHtml+="<tr><td>"+"<lable title=\""+data[i].title+"\">"+data[i].title.substring(0,17)+"</lable>....</td><td><a id=\""+data[i].id+"\" οnclick=\"ShowForm(this.id)\">編輯</a>"+
"<a href=\"${ctx}/sys/uploadPictorial/deleteManuscrip?id=${manuscriptList.id}\">刪除</a></td></tr>";
}else{
strHtml+="<tr><td>"+"<lable title=\""+data[i].title+"\">"+data[i].title+"</lable></td><td><a id=\""+data[i].id+"\" οnclick=\"ShowForm(this.id)\">編輯</a>"+
"<a href=\"${ctx}/sys/uploadPictorial/deleteManuscrip?id=${manuscriptList.id}\">刪除</a></td></tr>";
}
}
document.getElementById("manSubList").innerHTML=strHtml;
},
//調用出錯執行的函數
error:function(){
alert("刷新失敗！");
}
});
} <!-- 加載列表 -->
<form id="subListForm" modelAttribute="manuscriptSubList" method="post" style="height:590px;" class="form-horizontal">
<div style="width:400px;height:94%;float:right;border:20px solid #484848;overflow-y:scroll;">
<table id="manuscriptTable" class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th>題目</th>
<th>操作</th>
</tr>
</thead>
<tbody id="manSubList">
</tbody>
</table>
</div>
</form> <!-- 列表頁面按鈕 -->
<div id="listBtns" style="float:right;margin-right:15%">
<input id="btnRefresh" class="btn btn-primary" value="刷新" type="button" οnclick="RefreshForm()"/>
</div>
@ResponseBody
@RequestMapping(value = "manuscriptSubList")
public List<ManuscriptInfo> manuscriptSubList(@RequestParam Map<String,String> params,HttpServletRequest request,HttpServletResponse response,ManuscriptInfo manuscriptInfo, Model model) {
//獲得id
String pictorialId=request.getParameter("pictorialId");
//獲取當前的頁數
int pgStart=Integer.parseInt(request.getParameter("pgStart"));
List<ManuscriptInfo> manuscriptSubList = manuscriptService.findSubListByStartNum(pictorialId,pgStart);
return manuscriptSubList;
}三、學習心得
1、多多學習，多多總結，你會發現，自己會的東西越來越多
2、前後臺傳值在開發中十分重要，好好學習
3、總結在項目中的小tips，梳理自己的知識。
