1. 程式人生 > >遍歷表格中的input轉化為json資料傳到後臺解析實現一些操作

遍歷表格中的input轉化為json資料傳到後臺解析實現一些操作

首先是頁面,頁面簡單的畫出來是這一種

我需要把使用者Id和該使用者的對應一行的值傳到後臺儲存到資料庫中。

               <table id="mainTable" style="width: 750px; overflow: scroll;" >
			<tr>
				<td>使用者名稱</td>
				<c:forEach items="${subjectNumberList}" var="subjectName">
					<td colspan="2">${subjectName }</td>
				</c:forEach>
			</tr>
			<c:forEach items="${testRecordList}" var="testRecord" varStatus="i">
				<tr>
					<td>${userList[i.index].name }<input type="hidden" value="${userList[i.index].userId }"/></td>
					<c:forEach items="${subjectScoreList}" var="subjectScore">
						<td>${subjectScore}</td>
						<td><input type="text" style="width: 30px;"
									numberbox="true" 
									data-options="required:true,validType:'length[1,4]'"
									onblur="validateScore(${subjectScore},this)"
									class="easyui-validatebox"/>
						</td>
					</c:forEach>
				</tr>
			</c:forEach>
		</table>
這個是繪製表格的一些程式碼,我要遍歷表格的每一行的input的值;然後寫成json物件傳到後臺,在後臺進行處理。
function saveCredits(){
		var dataJson="[";
		var userId = "";
		var subjectScore = "";
		$("#mainTable tr").each(function (index, domEle){// mainTable 下的tr
			userId = "";
			subjectScore = "";
			if(index != 0){//遍歷除去第一行的之外的所有input作為json資料傳入後臺
				$(domEle).find("input").each(function(index,data){
					if(index == 0){
						userId = $(data).val();
					}else{
						if($(data).val() != "" && $(data).val() != null){//如果沒有輸入的情況下傳的值是0
							subjectScore += "," + $(data).val();
						}else{
							subjectScore += "," + 0;
						}
					}
				});
				if(!subjectScore.indexOf(",")){
					subjectScore = subjectScore.substring(1);
				}
				dataJson += "{"+"\"userId\":\""+userId+"\","+"\"subjectScore\":\""+subjectScore+"\"},";				
			}
		});
		if (dataJson.lastIndexOf(",")) {
			dataJson = dataJson.substring(0,dataJson.length -1);
			dataJson += "]";
		}
	
		var testId = "${test.testId}";
		$.ajax({
		   type: "POST",
		   url: "action",
		   data:{
			   data : dataJson,
			   testId : testId
		   },
		   success: function(result){
			   if (result.success){
                      $.messager.alert('成功提示',result.msg,"info",function(){
                   	   window.opener.doAction("****","../controller/url");//實現頁面成功之後的跳轉
                   	   window.close();
                      });
                  }else{
                      $.messager.alert('錯誤提示', result.msg,"error");
                  }
		   }
		});
	};
在後臺接收處理json
public PageResult<Object> teacherStudyassessSave(
			@RequestParam(value = "data", required = true) String data,
			@RequestParam(value = "testId", required = true) String testId){
		
		PageResult<Object> pageResult = new PageResult<Object>(); /* 定義返回物件 */
		
		JSONArray jsonArray = JSONArray.fromObject(data); /* 定義解析json陣列資料物件  */
		
		Map<String,String> userSubjectScoreMap = new HashMap<String, String>(); /* 定義Map集合 */
		List<String> userIdList = new ArrayList<String>(); /* 定義List集合 */
		
		/*
		 * 迴圈json陣列物件取出資料,放入Map中
		 * 迴圈json陣列物件取出使用者資料,放入List中
		 */
		for(int i = 0; i < jsonArray.size(); i++){
			userSubjectScoreMap.put(jsonArray.getJSONObject(i).getString("userId"),jsonArray.getJSONObject(i).getString("subjectScore"));
			userIdList.add(jsonArray.getJSONObject(i).getString("userId"));
		}
}
後面就可以對傳來的值進行一系列的處理和對資料庫操作。

下次可能用到的:遍歷表格,拼接json串,後臺對json的處理;這個只是感覺json方便一點。

繫結bean的話就是照著傳入引數,擷取字串就可以了。然後就可以對物件進行操作。