제이쿼리를 이용한 멀티 리스트 업데이트(다중)

순서 
jsp ->제이쿼리 -> controller -> service -> sql

<table id="scoreTable" class="table table-bordered text-center table-hover" summary="수강성적롼리 목록 입니다.">
    <caption class="sr-only">수강료 납부 목록</caption>
    <colgroup>
        <col style="width:4%;">
        <col style="width:7%;" class="hidden-xs hidden-sm">
        <col style="width:4%;">
        <col style="width:10%;">
        <col style="width:4%;" class="hidden-xs hidden-sm">
        <col style="width:10%;" class="hidden-xs hidden-sm">
        <col style="width:10%;">
        <col style="width:10%;">
    </colgroup>
    <thead>
    <tr>
        <th scope="col">아이디</th>
        <th scope="col" class="hidden-xs hidden-sm">이름</th>
        <th scope="col">중간</th>
        <th scope="col">기말</th>
        <th scope="col" class="hidden-xs hidden-sm">기타(과제물)</th>
        <th scope="col" class="hidden-xs hidden-sm">기타(수업기여도)</th>
        <th scope="col" class="hidden-xs hidden-sm">출석</th>
        <th scope="col">성적</th>
    </tr>
    </thead>
    <tbody>
    <c:choose>
		<c:when test="${empty memberResultList}">
			<tr>
				<td colspan="12"><i class="fa fa-book mr5"></i> 수강인원이 없습니다. </td>
			</tr>
		</c:when>
		<c:otherwise>
		    <c:forEach var="result" items="${memberResultList}" varStatus="status">
		        <tr onclick="">
		            <td class="small"><input type="hidden" name="egs_idx" value="${ result.EGS_IDX }">${result.USER_ID } </td>
		            <td class="hidden-xs hidden-sm small">${result.USER_NAME }</td>
		            <td> <input type="text" class="form-control number_input" name="midterms_score" size="2" value="${result.MIDTERMS_SCORE}"></td>
		            <td> <input type="text" class="form-control number_input" name="finals_score" size="2" value="${result.FINALS_SCORE}">
		            <input type="hidden" name="etc_combine_yn" value="${result.ETC_COMBINE_YN }">
		            
		            </td>
		           	<c:choose>
		           		<c:when test="${result.ETC_COMBINE_YN =='Y'}">
		           			<td colspan="2"> <input type="text" class="form-control number_input" name="etc_combine_score" size="2" value="${result.ETC_COMBINE_SCORE}"></td>
		           		</c:when>
		           		<c:otherwise>
		           			<td> <input type="text" class="form-control number_input" name="etc_project_score" size="2" value="${result.ETC_PROJECT_SCORE}"></td>
		           			<td> <input type="text" class="form-control number_input" name="etc_contribution_score" size="2" value="${result.ETC_CONTRIBUTION_SCORE}"></td>		
		           		</c:otherwise>
		           	</c:choose>
		            <td> <input type="text" class="form-control number_input" name="attendance_score" size="2" value="${result.ATTENDANCE_SCORE}"></td>
		            <td> <input type="hidden" name="total_score" value="">${result.TOTAL_SCORE}</td>
		        </tr>
		    </c:forEach>
	    </c:otherwise>
    </c:choose>
    </tbody>
</table>

위와 같은 테이블을 생성해주고, 그러면 아래와 같은 테이블이 완성된다.

그리고 나서 

제이쿼리 코드 작성

$('#saveBtn').on('click', function(e) {
confirmMessage('저장하시겠습니까?', '알림', function() {
			var updateList = [];
			
			$('#scoreTable tbody tr').each(function(idx, elem) {
				if ($(elem).find('input[type="hidden"]').length) {
					var data = {};
					data['egs_idx'] = $(elem).find('input[name="egs_idx"]').val();//기본값
					data['midterms_score'] = $(elem).find('input[name="midterms_score"]').val();//중간
					data['finals_score'] = $(elem).find('input[name="finals_score"]').val();//기말
					
					if($(elem).find('input[name="etc_combine_yn"]').val() == 'Y'){//기타(과제물+수업기여도) = Y
						data['etc_combine_score'] = $(elem).find('input[name="etc_combine_score"]').val();//기타(과제물+수업기여도)
						data['attendance_score'] = $(elem).find('input[name="attendance_score"]').val();//출석
						data['total_score'] = 
							Number($(elem).find('input[name="midterms_score"]').val()) + 
							Number($(elem).find('input[name="finals_score"]').val()) + 
							Number($(elem).find('input[name="etc_combine_score"]').val()) + 
							Number($(elem).find('input[name="attendance_score"]').val());
					}else{
						data['etc_project_score'] = $(elem).find('input[name="etc_project_score"]').val();//기타(과제물)
						data['etc_contribution_score'] = $(elem).find('input[name="etc_contribution_score"]').val();//기타(수업기여도)
						data['attendance_score'] = $(elem).find('input[name="attendance_score"]').val();//출석
						data['total_score'] =
							Number($(elem).find('input[name="midterms_score"]').val()) + 
							Number($(elem).find('input[name="finals_score"]').val()) +
							Number($(elem).find('input[name="etc_project_score"]').val())+  
							Number($(elem).find('input[name="etc_contribution_score"]').val()) + 
							Number($(elem).find('input[name="attendance_score"]').val());		
					}
						
					updateList[idx] = data;
				}
			});
			
			$.ajax({
    			type: 'post',
    			url: '${urlRootPath}/ajax/updateScoreList.do',
    			dataType: 'json',
    			contentType: 'application/json',
    			data: JSON.stringify(updateList),
    			success: function(json) {
    				alert(json.resultMsg);
    				location.reload();
    			},
    			error: function() {
    				alertMessage('저장에 실패하였습니다.');
    			}
    		});
            }, function() {});
	});

이렇게 비동기 처리방식으로 입력해주고,

자바 컨트롤러를 보자

//컨트롤러
@ResponseBody
    @RequestMapping(value={"/ajax/updateScoreList.do", "/{loginStr}/ajax/updateScoreList.do"}, method=RequestMethod.POST)
    public void updateTuitionList(HttpServletRequest request, HttpServletResponse response, ModelMap model, @RequestBody List<Map<String, Object>> list) throws BaseException, JSONException {
    	setNewJsonResponse();
    	log.info("/ajax/updateScoreList.do: "+ list);
    	for (Map<String, Object> score : list) {
    		score.put("mod_idx", PageSession.getLoginMemIdx());
    	}
    	
    	try {
    		service.updateBatchItems(list);
    		
    		setJsonSuccessMessage("저장하였습니다.");
    	} catch (Exception e) {
    		setJsonErrorMessage("서버 오류로 저장에 실패하였습니다.");
    	}
    	
    	Common.outWrite(getJsonResponse(), response);
    }
    
 //서비스
 @Service
public class GradeManagementServiceImpl extends CmsBaseServiceImpl implements GradeManagementService {
	@Override
	@Autowired
	@Qualifier("gradeManagementDAO")
	public void setCmsBaseDAO(CmsBaseDAO cmsBaseDAO) {
		super.setCmsBaseDAO(cmsBaseDAO);
	}

	public void updateBatchItems(List<Map<String, Object>> list) throws BaseException {
		if (list == null) return;
		
		for (Map<String, Object> item : list) {
			getCmsBaseDAO().updateItem(item);
		}
	}
	
}

그리고 sql 작성

<update id="updateItem" parameterType="java.util.HashMap">
		UPDATE EDU_GRADE_SCORE
		<set>
			<if test='midterms_score != null and midterms_score != ""'>
				MIDTERMS_SCORE = ${midterms_score},
			</if>
			<if test='finals_score != null and finals_score != ""'>
				FINALS_SCORE = ${finals_score},
			</if>
			<if test='etc_project_score != null and etc_project_score != ""'>
				ETC_PROJECT_SCORE = ${etc_project_score},
			</if>
			<if test='etc_combine_score != null and etc_combine_score != ""'>
				ETC_COMBINE_SCORE = ${etc_combine_score},
			</if>
			<if test='etc_contribution_score != null and etc_contribution_score != ""'>
				ETC_CONTRIBUTION_SCORE = ${etc_contribution_score},
			</if>
			<if test='attendance_score != null and attendance_score != ""'>
				ATTENDANCE_SCORE = ${attendance_score},
			</if>
			<if test='total_score != null and total_score != ""'>
				TOTAL_SCORE = ${total_score},
			</if>
			MOD_DATE = SYSDATE,
			MOD_IDX = #{mod_idx}
		</set>
		<where>
			EGS_IDX = #{egs_idx}
		</where>
	</update>

결과~