제이쿼리 nav바 토글버튼 만들기(EMP/detail)

nav바 

 

 

detail 쿼리문 

	SELECT  A.EMP_NUM, A.EMP_ADDR, A.EMP_PHE, A.EMP_NM, A.EMP_PAY, A.EMP_MJ_NUM
		FROM EMP A
		WHERE A.EMP_NUM = 'EMP005' --본인
		OR A.EMP_NUM = (
		        SELECT B.EMP_MJ_NUM FROM EMP B WHERE B.EMP_NUM = 'EMP005' --매니저찾기
		);

 

 

nav바

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link link active" data-id="employee" aria-current="page" href="#">직원</a>
  </li>
  <li class="nav-item">
    <a class="nav-link link" data-id="manager" href="#" >관리자</a>
  </li>
</ul>

스크립트

	$(".nav-link").on('click',function(){
		//toggleClass()메서드는 해당 클래스를 토글함
		$(".link").toggleClass("active");
		//removeAttr() : 선택한 ㅇ요송에서 하나 이상의 특성을 제거함
		$(".link").removeAttr("aria-current");
		//attr() : 선택한 요송의 속성을 추가함
		$(this).attr("aria-current","page");
		//this : link 클래스는 2개. 그 중에서 클린한 바로 그 요소
		let id =$(this).data("id");  //employee 또는 manager
		if(id=="employee"){
			$('#employee').css('display','block');
			$('#manager').css('display','none');
		}else{ //관리자 탭의 경우 관리자 div를 보여주고, 직원 div는 hidden 처리함
			$('#employee').css('display','none');
			$('#manager').css('display','block');
		}
		
	});
});

 

직원탭과 관리자탭은 한페이지에 있어야함 

직원탭 (id="employee")

<div class="bd-example" id="employee">
<form:form modelAttribute="empVO" action="/emp/createPost" method="post" class="row g-3">
	<!-- 직원번호 시작 -->
  <div class="col-md-6">
    <label for="empNum" class="form-label">직원번호</label>
    <form:input type="text" path="empNum" class="form-control"/>
      <input type="hidden" id="empNumAjax" class="form-control" />  
  </div>
  
  <div class="col-md-4">
    <label for="inputZip" class="form-label">우편번호</label>
    <input type="text" class="form-control" id="inputZip" name="inputZip" readonly>
    <button type="button" style="float:left;" id="btnPostno" class="btn btn-outline-danger">우편번호검색</button>
  </div>
  
  <div class="col-12">
    <label for="address" class="form-label">주소</label>
    <input type="text" class="form-control" id="address" name="address" placeholder="주소를 입력해주세요" readonly/>
  </div>
  
  <div class="col-12">
    <label for="inputAddress2" class="form-label">상세주소</label>
    <input type="text" class="form-control" id="detAddress" name="detAddress" />
  </div>
  <div class="col-md-6">
    <label for="empPhe" class="form-label">연락처</label>
    <input type="text" class="form-control" id="empPhe" name="empPhe">
    <form:errors path="empPhe"></form:errors>
  </div>
  <div class="col-md-6">
    <label for="empNm" class="form-label">직원명</label>
    <input type="text" class="form-control" id="empNm" name="empNm" required>
  </div>
  <div class="col-md-6">
    <label for="empPay" class="form-label">급여</label>
    <input type="text" class="form-control" id="empPay" name="empPay">
    <form:errors path="empPay"/>
  </div>
  <div class="col-md-6">
    <label for="empMjNum" class="form-label">매니저명</label>
    <input type="hidden" class="form-control" id="empMjNum" name="empMjNum" >
    <input type="text" class="form-control" id="empMjNm" 
    placeholder="직원명을 입력해주세요" readonly/>
        <button type="button" id="btnEmpMjNum" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#exampleModal">검색</button>
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">등록</button>
  </div>
</form:form>
</div>

 

관리자탭(id="manager" style="display:none;")

<div class="bd-example" id="manager" style="display:none;">
<form:form modelAttribute="empVO" action="/emp/createPost" method="post" class="row g-3">
	<!-- 직원번호 시작 -->
  <div class="col-md-6">
    <label for="empNum" class="form-label">매니저버노</label>
    <form:input type="text" path="empNum" class="form-control"/>
      <input type="hidden" id="empNumAjax" class="form-control" />  
  </div>
  
  <div class="col-md-4">
    <label for="inputZip" class="form-label">우편번호</label>
    <input type="text" class="form-control" id="inputZip" name="inputZip" readonly>
    <button type="button" style="float:left;" id="btnPostno" class="btn btn-outline-danger">우편번호검색</button>
  </div>
  
  <div class="col-12">
    <label for="address" class="form-label">주소</label>
    <input type="text" class="form-control" id="address" name="address" placeholder="주소를 입력해주세요" readonly/>
  </div>
  
  <div class="col-12">
    <label for="inputAddress2" class="form-label">상세주소</label>
    <input type="text" class="form-control" id="detAddress" name="detAddress" />
  </div>
  <div class="col-md-6">
    <label for="empPhe" class="form-label">연락처</label>
    <input type="text" class="form-control" id="empPhe" name="empPhe">
    <form:errors path="empPhe"></form:errors>
  </div>
  <div class="col-md-6">
    <label for="empNm" class="form-label">직원명</label>
    <input type="text" class="form-control" id="empNm" name="empNm" required>
  </div>
  <div class="col-md-6">
    <label for="empPay" class="form-label">급여</label>
    <input type="text" class="form-control" id="empPay" name="empPay">
    <form:errors path="empPay"/>
  </div>
  <div class="col-md-6">
    <label for="empMjNum" class="form-label">매니저명</label>
    <input type="hidden" class="form-control" id="empMjNum" name="empMjNum" >
    <input type="text" class="form-control" id="empMjNm" 
    placeholder="직원명을 입력해주세요" readonly/>
        <button type="button" id="btnEmpMjNum" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#exampleModal">검색</button>
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">등록</button>
  </div>
</form:form>
</div>