<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script type="text/javascript" src="/resources/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
// 상품 분류 코드 추가
// 아이디 자동 생성
$("#btnInsert").on("click",function(){
//tbody에 접근해서 자식요소들 중에서 마지막 자식요소(last())의 자식 중에서 0번째 (<td>38</td>)의 text값
let lprodId = $("#LprodBody").children().last(0).children("td").eq(0).html();
console.log("lprodId : " + lprodId);
//Number(숫자형문자) -> 숫자형으로 변환
lprodId = Number(lprodId) + 1;
$("#lprodIdNew").val(lprodId);
$("#lprodIdNew").attr("readonly" , true);
});
//중복 체크
/*
blur() 메서드 - 해당 요소가 포커스 잃을 때만 발생.
focusout() 메서드 - 해당 요소 뿐만 아니라, 그 안의 요소가 포커스 잃을 때도 발생.
*/
//달러("#lprodGuNew").on("focusout",function(){})
$("#lprodGuNew").focusout(function(){
let lprodGu = $(this).val();
console.log("lprodGu : " + lprodGu);
let aVal;
let cnt = 0;
$("tr").each(function(){
//(this).children("td").eq(1) : <td>..</td>
aVal = $(this).children("td").eq(1).children("a").eq(0).html();
//등록하려는 Gu값과 목록의 Gu값이 같은 값이 있으면
if(lprodGu==aVal){
//등록 버튼 비활성화
$("#btnNew").attr("disabled","disabled");
$("#lprodGuNew").attr("class","form-control is-invalid");
//중복 됨
cnt++;
}
});
//중복 없음
if(cnt==0){
//등록 버튼 활성화
$("#btnNew").removeAttr("disabled");
$("#lprodGuNew").attr("class","form-control is-warning");
}
});
//상품 분류 코드 삭제
$("#delete").on("click" , function(){
$("#modal-sm").modal("hide");
$("#modal-del").modal("show");
});
//상품 분류 코드 삭제 실행
$("#lprodIdDel").on("click",function(){
let lprodId = $("#lprodId").val();//삭제 대상 키본키 값
console.log("lprodId : " + lprodId);
let data = {
"lprodId":lprodId
};
console.log("data",data);
/*
요청URI : /lprod/deleteOne
요청파라미터(json) : {"lprodId":75}
요청방식 : post
리턴타입 : int
*/
$.ajax({
url:"/lprod/deleteOne",
contentType:"application/json;charset=utf-8",
data:JSON.stringify(data),
type:"post",
dataType:"text",
success:function(result){
console.log("result:", result);
if(result="1"){ // 1행 삭제됨
console.log("삭제처리하기");
let tdVal;
$("tr").each(function () {
//this : 반복중에 포커스 된 바로 그 tr요소
//(this).children("td").eq(0) : <td>11</td>
tdVal = $(this).children("td").eq(0).html();
// 삭제 대상의 Id값과 반복 중에 포커스 된 Id값이 같으면
// 그 tr을 제거
if(lprodId==tdVal){
$(this).remove();
}
});
}
$("#modal-del").modal("hide");
}
});
});
//상품 분류 코드 삭제 실행
$("#lprodIdDel").on("click" , function(){
let lprodId = $("#lprodId").val();
console.log("lprodId : " + lprodId );
});
//modal 수정 실행
$("#confirm").on("click", function() {
let lprodId = $("#lprodId").val();
let lprodGu = $("#lprodGu").val(); //수정대상
let lprodNm = $("#lprodNm").val(); //수정대상
// JSON오브젝트
let data = {
"lprodId" : lprodId,
"lprodGu" : lprodGu,
"lprodNm" : lprodNm
};
$.ajax({
url : "/lprod/updateOne",
contentType : "application/json;charset=utf-8",
data : JSON.stringify(data),
type : "post",
dataType : "text", //data타입이 1개이기때문에 text로 지정
success : function(result) {
console.log("result : ", result);
$("#modalTitle").html(lprodGu);
$("#modalBody").html(lprodNm);
// 일반모드
$(".general").css("display", "block");
$(".edit").css("display", "none");
let tdVal;
// 부모창목록도 변경내역 반영
// console.log($("tr"));
$("tr").each(function () {
//.children : [0]td , [1]td, [2]td
//(this).children("td").eq(0) : <td>11</td>
tdVal = $(this).children("td").eq(0).html();// 11
//클릭한 Id값과 반복중인 Id값이 같을 때
if(lprodId == tdVal){
$(this).children("td").eq(1).html(
"<a data-lprod-id='"+lprodId
+"' class='aModal' data-toggle='modal' href='#modal-sm'>"+lprodGu
+"</a>"
);
$(this).children("td").eq(2).html(lprodNm);
}
});
}
})
console.log("data : ", data);
});
//일반모드 / 수정모드 토글
$("#modify").on("click", function() {
$(".general").css("display", "none");
$(".edit").css("display", "block");
});
$("#cancel").on("click", function() {
$(".general").css("display", "block");
$(".edit").css("display", "none");
});
// 모달 다루기
// 동적생성 데이터 -> 다이렉트로 접근 할 수없다 -> $(".aModal").on("click" , function(){}); 정적요소 이벤트처리
$(document).on("click", ".aModal", function() { //동적 요소 이벤트 처리
//여러개의 동일 class 요소 중에서 방금 클릭한 바로 그 요소
//data-lprod-id="1"
let lprodId = $(this).data("lprodId")
console.log("lprodId : " + lprodId);
let data = {
"lprodId" : lprodId
};
console.log("data : " + data);
// LPROD 테이블에서 1행 검색
/*
요청URI : /lprod/listOne
요청파라미터(json) : {"lprodId":"2"}
요청방식 : post
*/
$.ajax({
url : "/lprod/listOne",
contentType : "application/json;charset=utf-8",
data : JSON.stringify(data),
type : "post",
dataType : "json",
success : function(result) {
console.log("result", result);
//text 입력
$("#lprodId").val(result.lprodId);
$("#lprodGu").val(result.lprodGu);
$("#lprodNm").val(result.lprodNm);
//title/body입력
$("#modalTitle").html(result.lprodGu);
$("#modalBody").html(result.lprodNm);
}
})
});
//검색
$("#btnSearch").on("click",function() {
let keyword = $("input[name='keyword']").val();
console.log("keyword : " + keyword);
//json 오브젝트
let data = {
"keyword" : keyword
};
console.log("data : ", data); // data를 object로 볼수있다
console.log("data : " + JSON.stringify(data)); // data를 문자열로 본다
//contentType : 보내는 타입
//dataType : 응답 타입
$.ajax({
url : "/lprod/listAjax",
contentType : "application/json;charset=utf-8",Q
data : JSON.stringify(data), // json오브젝트를 string화
type : "post",
dataType : "json",
success : function(result) {
//result : List<StudVO>
// console.log("result",result);
//console.log("result : " + JSON.stringify(result));
//result : List<StudVO>
let str = "";
//목록을 초기화
$("#LprodBody").html("");
$.each(result,function(idx,lprodVO) {
// console.log("lprodVO[" + idx + "] : ", lprodVO);
//{rnum: 1, studId: 'a001', studNm: '김은대', studPw: 'asdfasdf', enabled: '1'}
str += "<tr>";
str += "<td>"+ lprodVO.lprodId+ "</td>";
str += "<td><a data-lprod-id='"+lprodVO.lprodId+"'class='aModal' data-toggle='modal' href='#modal-sm'>"
+ lprodVO.lprodGu+ "</td>";
//ex)
//<a href = "#" id="aId" data-mem-id="a001">
//$("#aId").data("memId) => a001(카멜표기법으로 변환해준다!)
//요소.data("data-key-value")->카멜표기법으로 변환(keyValue)
//요소.data("data-key")->카멜표기법x(key)
str += "<td>"+ lprodVO.lprodNm+ "</td>";
str += "</tr>";
});
//요소.append : 누적, 요소.html : 새로고침, 요소.innerHTML : JavaScript에서 새로고침
$("#LprodBody").append(str);
}
});
});
// HTML(HyperText Markup Language)
// ajax : Asyncronous JavaSrcipt And XML(eXtensible Markup Language)
// (데이터 정보 교환 방식의 한 종류로 비동기 방식, 특정 기술이 아님!)
$.ajax({
url : "/lprod/listAjax",
type : "post",
dataType : "json",
success : function(result) {
console.log("result : ", result);
let str = "";
$("#LprodBody").html("");
//result : List<LprodVO>
$.each(result,function(idx, lprodVO) {
str += "<tr>";
str += "<td>" + lprodVO.lprodId+ "</td>";
//↓↓↓에서 버튼 클릭시 작동(a링크걸어줘야 한다!)
str += "<td><a data-lprod-id='"+lprodVO.lprodId+"'class='aModal' data-toggle='modal' href='#modal-sm'>"
+ lprodVO.lprodGu + "</td>";
str += "<td>" + lprodVO.lprodNm+ "</td>";
str += "</tr>";
});
$("#LprodBody").append(str);
result.forEach(function(lprodVO) {
});
}
});
});
</script>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">상품분류검색</h3>
<div class="card-tools">
<!-- lprodGu, lprodNm이 검색 대상 -->
<div class="input-group input-group-sm"
style="width: 150px;float:right;">
<input type="text" name="keyword" id="keyword"
class="form-control float-right" placeholder="Search" />
<div class="input-group-append">
<button type="button" id="btnSearch" class="btn btn-default">
<i class="fas fa-search"></i>
</button>
</div>
</div>
<div class="input-group input-group-sm"
style="width: 150px;float:right;">
<button type="button" data-toggle="modal" data-target="#modal-insert"
id="btnInsert" class="btn btn-block btn-outline-primary btn-sm">
상품분류 추가</button>
</div>
</div>
</div>
<div class="card-body table-responsive p-0">
<table class="table table-hover text-nowrap">
<thead>
<tr>
<th>상품분류아이디</th>
<th>상품분류코드</th>
<th>상품분류명</th>
</tr>
</thead>
<tbody id="LprodBody">
<!-- jstl의 forEach를 사용하여 List<LprodVO>를 출력해보자
<c:forEach var="lprodVO" items="${lprodVOList}" varStatus="stat">
<tr>
<td><span class="tag tag-success">${stat.index},${stat.count},${lprodVO.lprodId}</span></td>
<td><span class="tag tag-warning">${lprodVO.lprodGu}</span></td>
<td><span class="tag tag-primary">${lprodVO.lprodNm}</span></td>
</tr>
</c:forEach>
-->
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- ///// 모달 시작(small size) ///// -->
<div class="modal fade" id="modal-sm">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<input type="hidden" id="lprodId" class="form-control is-warning"
value="" />
<h4 class="modal-title general" id="modalTitle"></h4>
<input type="text" id="lprodGu" class="form-control is-warning edit"
value="" style="display: none;" />
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p class="general" id="modalBody"></p>
<input type="text" id="lprodNm" class="form-control is-warning edit"
value="" style="display: none;" />
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<!-- 일반모드 -->
<button type="button" id="modify" class="btn btn-primary general">수정</button>
<button type="button" id="delete" class="btn btn-primary general">삭제</button>
<!-- 수정모드 -->
<button type="button" id="confirm"
style="display: none; float: right;" class="btn btn-primary edit">확인</button>
<button type="button" id="cancel"
style="display: none; float: right;" class="btn btn-primary edit">취소</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- ///// 모달 끝(작은 크기) /// -->
<!-- ///// 삭제모달(시작) ///// -->
<div class="modal fade" id="modal-del">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">상품분류코드 삭제</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>삭제하시겠습니까?…</p>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="lprodIdDel" class="btn btn-primary" >삭제</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- ///// 삭제모달 끝 (작은크기) ///// -->
<!-- ///// 상품 분류 추가 모달 시작(작은 크기) /// -->
<div class="modal fade" id="modal-insert">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">상품 분류 추가</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>
<div class="form-group">
<label class="col-form-label" for="lprodIdNew"><i class="fas fa-check"></i>
상품분류 아이디</label>
<input type="text" class="form-control is-valid" id="lprodIdNew" name="lprodId"
placeholder="상품분류 아이디" />
</div>
<div class="form-group">
<label class="col-form-label" for="lprodGuNew"><i class="far fa-bell"></i>
상품분류 코드</label>
<input type="text" class="form-control is-warning" id="lprodGuNew" name="lprodGu"
placeholder="상품분류 코드" />
</div>
<div class="form-group">
<label class="col-form-label" for="lprodNmNew"><i class="far fa-bell"></i>
상품분류 명</label>
<input type="text" class="form-control is-warning" id="lprodNmNew" name="lprodNm"
placeholder="상품분류 명" />
</div>
</p>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="btnNew" class="btn btn-primary">등록</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- ///// 상품 분류 추가 모달 끝(작은 크기) /// -->
java
