[Feat] 다중선택, Radio 옵션, VO 파라미터 전달

 

VO에 담긴 parameter전달

//Controller
@RequestMapping(value = "example.php")
public String displayVariableList(@ModelAttribute("exampleVO") AdminSearchVO paramPageVO,
HttpServletRequest request, Model model, HttpSession session) throws IOException, SQLException {
	...
    // .submit();을 이용해 parameter로 AdminSearchVO안에 데이터 입력 => model속성은 exampleVO임
    ...
}

<!-- JQUERY -->
...
<form id="frm" name="frm" method="post">
	<input type="hidden" id="test" name="test" value="${exampleVO.test}">
</form>
...

//JS
...
function action(){
	const serializedValues = $('#frm').serializeObject();
	$.ajax({
    	url: 'example.php'
    	async: true, // false 일 경우 동기 요청으로 변경
    	type: 'POST'
    	data: {
        	test : 'test'
        }
    });
}
...

다중선택 활용

// Jquery
...
		<tr>
			<th><input type="checkbox" id="all_check" onclick="allCheck(true)"></th>
			<th>사용여부</th>
		</tr>
	</thead>
	<tbody id="dataGridId">
		<c:forEach var="item" items="${list}" varStatus="s">
			<tr>
				<%-- 자동 번호 --%>
				<%--<td data-portalSeq="NO">
                ${(dataVariableVO.totalCnt-s.index)-((dataVariableVO.nowPage)*10)} </td>--%>
				<td scope="row">
					<input id="select-sub-code-${s.index }" class="form-check-input check-item" type="checkbox" data-seq="${item.varSeq}"/>
					<label for="select-sub-code-${s.index }"></label>
				</td>
				<td id="col4_${item.varSeq}">
					<script>
						if ("${item.useYn}" === "Y") {
							document.write("사용");
						} else if ("${item.useYn}" === "N") {
							document.write("미사용");
						}
					</script>
				</td>
			</tr>
		</c:forEach>
		<c:if test="${fn:length(list) == 0 }">
			<tr>
				<td colspan="6">검색 결과가 없습니다.</td>
			</tr>
		</c:if>
	</tbody>
</table>
...

// JavaScript
...
function fn_delete() {
	var t = $("input[type=checkbox].check-item:checked");

	if (t.length == 0) {
		alert("삭제할 키워드를 선택해주세요.");
		return;
	}

	if (confirm("정말 삭제하시겠습니까?")) {
		let e = new Object(), n = new Array();
		for (let o = 0; o < t.length; o++) {
			var a = $(t[o]).attr("data-seq");
			n.push(a);
		}
		e.varSeqList = n, loading.start();
		$.ajax({
			...
			// POST진행
			...
		});
	}
}
...

 

RADIO버튼 적용된 값 불러오기

//JS
function fn_radioCheck(c) {
	$("input[name=useYn]").filter("[value=" + c + "]").prop("checked", true);
}

<!-- JQUERY -->
...
<tr>
	<th>사용여부</th>
	<td class="tal">
		<label for="useYn_Y" class="pointer">
			<input type="radio" value="Y" id="useYn_Y" name="useYn">사용
		</label>
		<label for="useYn_n" class="pointer" style="margin-left: 10px">
			<input type="radio" value="N" id="useYn_n" name="useYn">미사용
		</label>
	</td>
</tr>
...