Last Updated: 2022년 12월 14일
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"> <span class="badge badge-primary">New</span> <b>${count}</b>개의 게시물이 있습니다. <button type="button" class="btn btn-outline-primary" id="btnExcelDownload">엑셀다운로드</button> <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> <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)}"/>'>«</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)}"/>'>»</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"%>