[Spring MVC] 게시판 boardContent.jsp #10

Last Updated: 2022년 12월 14일

DB 내용 보여주기 및 수정

출처: 내 컴퓨터

boardContent.jsp

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

<script src="https://cdn.ckeditor.com/4.13.1/standard/ckeditor.js"></script>
<script type="text/javascript">
var g_count =1;
$(document).ready(function(e){

	CKEDITOR.replace( 'content' );
	CKEDITOR.config.height = 300;

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

	// 게시물 수정
	$("#boardUpdateBtn").on("click", function(e) {
		e.preventDefault();
		if(fn_valiChk()) { return false; }
		var updateYN = confirm("수정하시겠습니까?");
		if(updateYN == true) {
			formObj.attr("action", "<c:url value='/board/boardUpdate' />");
			formObj.attr("method", "post");
			formObj.submit();
		}
	})

	// 게시물 삭제
	$("#boardDeleteBtn").on("click", function(e) {
		e.preventDefault();
		var deleteYN = confirm("삭제하시겠습니까?");
		if(deleteYN == true) {
			formObj.attr("action", "<c:url value='/board/boardDelete' />");
			formObj.attr("method", "post");
			formObj.submit();
		}
	})

	// 첨부파일 다운로드
	$("a[name='file']").on("click", function(e) {
		e.preventDefault();
		fn_downloadFile($(this));
	})

	// 첨부파일 추가
	$("#addFile").on("click", function(e) {
		e.preventDefault();
		fn_fileAdd();
	})

	// 첨부파일 삭제
	$("#fileDeleteBtn").on("click", function(e) {
		alert("첨부파일 삭제");
		e.preventDefault();
		//fn_fileDelete();
	})

	$("#fileDelete").on("click", function(e){ //삭제 버튼
		e.preventDefault();
		//fn_fileDelete($(this));
	})

})

function fn_downloadFile(obj) {
	var idx = obj.parent().find("#idx").val();
	var comSubmit = new ComSubmit();
	comSubmit.setUrl("<c:url value='/board/fileDownload' />");
	comSubmit.addParam("idx", idx);
	comSubmit.addParam("seq", ${boardContent.seq} );
	comSubmit.submit();
	$("#commonForm").children().remove();
}

function fn_fileAdd() {
	var htmls = "<p><input type='file' name='file_"+(g_count++)+"' id='file_"+(g_count++)+"'/><a href='#this' name='delete' class='btn'>삭제하기</a></p> ";
	$("#fileDiv").append(htmls);
	$("a[name='delete']").on("click",function(e){
		fn_fileAddDelete($(this));
	})
}
function fn_fileAddDelete(obj){
	obj.parent().remove();
}

function fn_fileDelete(idx) {
	var comSubmit = new ComSubmit();
	comSubmit.setUrl("<c:url value='/board/fileDelete' />");
	comSubmit.addParam("idx", idx);
	comSubmit.addParam("seq", ${boardContent.seq} );
	comSubmit.addParam("searchType", "${searchCriteria.searchType }");
	comSubmit.addParam("keyword", "${searchCriteria.keyword }");
	comSubmit.addParam("page", ${searchCriteria.page });
	comSubmit.addParam("perPageNum", ${searchCriteria.perPageNum });
	comSubmit.submit();
	$("#commonForm").children().remove();
}

function fn_valiChk() {
	var form = $("form[name='form'] .chk").length;
	for(var i = 0; i<form; i++){
		if($(".chk").eq(i).val() == "" || $(".chk").eq(i).val() == null){
			alert($(".chk").eq(i).attr("title"));
			return true;
		}
	}
}
</script>

<div align="center" class="container">

<!-- <form name="form" id="form" role="form" method="post"> -->
<form:form name="form" id="form" modelAttribute="boardContent" mehtod="post" enctype="multipart/form-data">
<form:hidden path="seq"/>
<input type="hidden" name="searchType" value="${searchCriteria.searchType }"/>
<input type="hidden" name="keyword" value="${searchCriteria.keyword }"/>
<input type="hidden" name="page" value="${searchCriteria.page }"/>
<input type="hidden" name="perPageNum" value="${searchCriteria.perPageNum }"/>

<table class="table">
	<tbody>
		<tr>
			<th style="width:100px"><form:label path="name">작성자</form:label></th>
			<td><form:input path="name" class="form-control col-md-6" /></td>
		</tr>
		<tr>
			<th><form:label path="title">제목</form:label></th>
			<td><form:input path="title" class="form-control col-md-6" /></td>
		</tr>
		<tr>
			<th><form:label path="content">내용</form:label></th>
			<td><form:textarea path="content" class="form-control col-md-6" /></td>
		</tr>
		<tr>
			<th><form:label path="regdate">작성일</form:label></th>
			<td><fmt:formatDate value="${boardContent.regdate}" pattern="yyyy-MM-dd"/></td>
		</tr>
		<c:forEach items="${filesList}" varStatus="row" var="var" >
		<tr>
			<th>첨부파일${row.count}</th>
			<td>
				<input type="hidden" id="idx" value="${var.idx}" />
				<a href="#this" name="file">${var.original_file_name}</a> (${var.file_size}Byte)
				<a href="<c:url value="/board/fileDownload/${var.seq}/${var.idx}" />">${var.original_file_name}</a> (${var.file_size}Byte)
				<button type="button" onClick="fn_fileDelete('${var.idx}');" class="btn btn-outline-primary btn-sm">삭제</button>
				<!-- <a href="<c:url value="/board/fileDelete/${boardContent.seq}/${var.idx}" />" class="btn">삭제</a> -->
			</td>
		</tr>
		</c:forEach>
		<c:if test="${fn:length(var.idx) == 0 } ">
			<div class="custom-file"><input type="file" name="file_0" id="file_0"></div><p/>
		</c:if>

		<tr><td colspan="2"><div id="fileDiv"></div></td></tr>

		<%--
		<c:forEach var="file" items="${filesList}" varStatus="loop">
		<tr>
			<th>첨부파일${loop.count}</th>
			<td><a href="<c:url value="/board/fileDownload${boardVO.seq}/${file.seq}/${file.stored_file_name}" />">${file.original_file_name}</a></td>
		</tr>
		</c:forEach>
		--%>

	</tbody>
</table>

</form:form>

<div class="row justify-content-center">
	<button type="button" class="btn btn-outline-primary btn-lg" id="boardUpdateBtn">수정</button>&nbsp;
	<button type="button" class="btn btn-outline-primary btn-lg" id="boardDeleteBtn">삭제</button>&nbsp;
	<form id="frm" action="<c:url value="/board/boardList" />" >
		<input type="hidden" name="searchType" value="${searchCriteria.searchType }"/>
		<input type="hidden" name="keyword" value="${searchCriteria.keyword }"/>
		<input type="hidden" name="page" value="${searchCriteria.page }"/>
		<input type="hidden" name="perPageNum" value="${searchCriteria.perPageNum }"/>
		<button class="btn btn-outline-primary btn-lg">목록</button>&nbsp;
	</form>
	<a href="#this" class="btn btn-outline-primary btn-lg" id="addFile">파일 추가</a>
</div>

</div>

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