개발자의 삶

[Spring MVC] 게시판 boardList.jsp #9

by
2022년 12월 14일

Last Updated: 2025년 07월 18일

boardList.jsp 로 DB의 리스트로 보여준다.

출처: 내 컴퓨터

boardList.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/layout/header.jsp"%>

<script type="text/javascript">
$(document).ready(function(e) {

	var formObj = $("form[name='form']");

	$('input:checkbox[id="visa_check"]').click(function(e) {
		var visaArray = []; // 배열선언
		$('input[name="visa_check"]:checked').each(function(i) { //체크된 리스트 저장
			visaArray.push($(this).val());
		});
		$("#multiPrint").text(visaArray);
	})

	// 전부 체크
	$("#allCheck").click(function() {
		var str = "";
	    if ($("#allCheck").is(':checked')) {
	        $("input[type=checkbox]").prop("checked", true);
			$(".visa_check").each(function() {
				if($(this).is(":checked"))
					str += $(this).val() + " ";
			});
	    } else {
	        $("input[type=checkbox]").prop("checked", false);
	    }
		$("#multiPrint").text(str);
	})

	// 리스트에서 체크 배열
	$("#btnCheck").click(function() {
		var visaArray = []; // 배열선언
		$('input[name="visa_check"]:checked').each(function(i) { //체크된 리스트 저장
			visaArray.push($(this).val());
		});
		if(visaArray == '') { alert("선택된거 없음"); return false; }
		var objParams = {
			"visaList" : visaArray
		};
		$.ajax({
			url : "${pageContext.request.contextPath}/board/boardCheck",
			dataType : "json",
			contentType : "application/x-www-form-urlencoded; charset=UTF-8",
			type : "post",
			data : objParams,
			success : function(retVal) {
				if(retVal.code == "ok") {
					alert(retVal.message);
				} else {
					alert(retVal.message);
				}
			},
			error : function(request, status, error) {
				console.log("AJAX_ERROR");
			}
		});
	})

	//글쓰기
	$(document).on('click', '#btnWriteForm', function(e) {
		e.preventDefault();
		location.href = "${pageContext.request.contextPath}/board/boardForm";
	})

	//엑셀 다운로드
	$(document).on('click', '#btnExcelDownload', function(e){
		e.preventDefault();
		var url = "${pageContext.request.contextPath}/board/excelDownload";
		url = url + "?searchType=${searchType}";
		url = url + "&keyword=${keyword}";
		location.href = url;
	})

	$("#excelUpForm").change(function() {
		var form = $("#excelUpForm")[0];
		var data = new FormData(form);
		$.ajax({
			enctype:"multipart/form-data",
			method:"POST",
			url: "<c:url value='/board/excelUpload' />",
			processData: false,
			contentType: false,
			cache: false,
			data: data,
			success: function(result){
				alert("업로드 성공!!");
			}
		});
	});

});

function cAll() {
    if ($("#checkAll").is(':checked')) {
        $("input[type=checkbox]").prop("checked", true);
    } else {
        $("input[type=checkbox]").prop("checked", false);
    }
}
</script>

<!-- 도움말 사용할 때 필요 -->
<div class="row">
	<div class="col">
		<div class="collapse multi-collapse" id="multiCollapseExample1">
			<div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
		</div>
	</div>
	<div class="col">
		<div class="collapse multi-collapse" id="multiCollapseExample2">
			<div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
		</div>
	</div>
</div>

<span id="multiPrint"></span>

<form class="row" name="searchForm" action="<c:url value="/board/boardList" />" method="GET" >
<div class="col">
	&nbsp;<span class="badge badge-primary">New</span>&nbsp;<b>${count}</b>개의 게시물이 있습니다.
	&nbsp;<button type="button" class="btn btn-outline-primary" id="btnExcelDownload">엑셀다운로드</button>
	&nbsp;<button type="button" class="btn btn-sm btn-primary" id="btnCheck">승인</button>
</div>
<div class="form-group row justify-content-end">
	<div class="w100" style="padding-right:10px">
	<select name="searchType" class="form-control">
		<option value="all" <c:out value="${searchType =='all'? 'selected':'' }"/>>제목+이름+내용</option>
		<option value="writer" <c:out value="${searchType =='writer'? 'selected':'' }"/>>이름</option>
		<option value="content" <c:out value="${searchType =='content'? 'selected':'' }"/>>내용</option>
		<option value="title" <c:out value="${searchType =='title'? 'selected':'' }"/>>제목</option>
	</select>
	</div>
	<div class="w300" style="padding-right:10px"><input class="form-control" type="text" name="keyword" value="${keyword}" placeholder="검색"></div>
	<div><input class="btn btn-primary" id="submit" type="submit" value="검색"></div>
	<div>&nbsp;<button type="button" class="btn btn-outline-primary" id="btnWriteForm">글쓰기</button></div>
</div>
</form>

<table class="table table-hover" border="0">
	<thead class="thead-dark">
		<tr style="text-align: center;">
			<th scope="col" style="width:5%;">#</th>
			<th scope="col" style="width:5%;"><input type="checkbox" id="allCheck"></th>
			<th scope="col" style="width:auto;">제목</th>
			<th scope="col" style="width:10%;">작성자</th>
			<th scope="col" style="width:10%;">작성일</th>
			<th scope="col" style="width:7%;">조회수</th>
			<th scope="col" style="width:7%;">승인</th>
		</tr>
	</thead>
	<tbody>
	<c:choose>
		<c:when test="${!empty boardList}">
			<c:forEach items="${boardList }" var="board" varStatus="loop">
				<tr style="text-align: center;">
					<td scope="row">${board.seq }</td>
					<td nowrap><input type="checkbox" name="visa_check" id="visa_check" class="visa_check" value="${board.seq}"/></td>
					<td align="left"><a href="<c:url value="/board/boardContent/${board.seq}${pageMaker.makeSearch(pageMaker.cri.page)}" />">${board.title }</a></td>
					<td>${board.name }</td>
					<td><fmt:formatDate value="${board.regdate }" pattern="yyyy-MM-dd"/></td>
					<td>${board.count }</td>
				</tr>
			</c:forEach>
		</c:when>
		<c:otherwise>
			<tr><td colspan="5">등록된 글이 없습니다.</td></tr>
		</c:otherwise>
	</c:choose>
	</tbody>
</table>

<!-- 페이징 -->
<ul class="pagination justify-content-center">
${pageMaker.startPage} / ${pageMaker.totalCount}
	<c:if test="${pageMaker.prev}">
		<a class="page-link"  href='<c:url value="/board/boardList?${pageMaker.makeSearch(pageMaker.startPage-1)}"/>'>&laquo;</a>
	</c:if>
	<c:forEach begin="${pageMaker.startPage}" end="${pageMaker.endPage}" var="idx">
		<li class="page-item <c:out value="${page == idx ? 'active' : ''}"/> ">
		<a class="page-link" href='<c:url value="/board/boardList${pageMaker.makeSearch(idx)}"/>'>${idx}</a>
		</li>
	</c:forEach>
	<c:if test="${pageMaker.next && pageMaker.endPage >0}">
		<a class="page-link" href='<c:url value="/board/boardList${pageMaker.makeSearch(pageMaker.endPage+1)}"/>'>&raquo;</a>
	</c:if>
</ul>

<c:if test="${msg ne null}"><p style="color:#f00;">${msg}</p></c:if>

엑셀업로드 : <br/>
<form name="excelUpForm" id="excelUpForm" enctype="multipart/form-data" method="POST" action="./excelDown.do">
    <input type="file" id="excelFile" name="excleFile" value="엑셀 업로드" />
</form>


<table border="1" align="center">
                <tr>
                    <th><input type="checkbox" id="checkAll" onclick="cAll();"><label for="c0">전체약관동의
                </tr>
                <tr>
                    <th><input type="checkbox" id="c1" required><label for="c1">이용약관(필수)...
                            target="_blank">약관정보</a><br>
                        <input type="checkbox" id="c2" required><label for="c2">개인정보처리 동의(필수)...
                            target="_blank">약관정보</a><br>
                        <input type="checkbox" id="c3" required><label for="c3">개인정보 제3자 제공 동의...
                            target="_blank">약관정보</a><br>
                        <input type="checkbox" id="c4"><label for="c4">이벤트혜택 알림 수신동의(선택)...
                </tr>
            </table><br>

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

<%@ include file="/WEB-INF/views/layout/tail.jsp"%>

Tags:

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

You may also like