[JQuery] AJAX테이블 생성 후 팝업창 데이터 전달&인쇄 방법!! (영상 有)

 

안녕하세요.

정보 조회기능을 AJAX로 불러들여 팝업창으로 인쇄하는 기능을 정리해보았습니다.

저는 사용자페이지에서 이수증을 출력하기 위해서 아래와 같이 구현과정을 진행하였습니다.

 

• 정보를 입력하여 조회하고, 
• 조회한 정보를 AJAX로 테이블 형태로 불러온 다음,
• 팝업창으로 정보를 띄어 인쇄

 

많이 사용하는 기능이니 만큼 많은 분들에게 도움이 되었으면 좋겠습니다.

아래는 구현한 영상입니다. 

 

 

 

아래는 팝업창값을 부모창에 전달하는 방법을 정리한 글입니다.

https://chobopark.tistory.com/5

[Spring]팝업 리스트 값을 부모창에 전달하는 방법 (영상 有)

 

 

시작하기 전에, 

AJAX를 사용하려면 라이브러리가 필요합니다.

아래와 같이 pom.xml에 의존성 주입을 합니다.

 

<dependency>
  <groupId>net.sf.json-lib</groupId>
  <artifactId>json-lib</artifactId>
  <classifier>jdk15</classifier>
  <version>2.4</version>
</dependency> 
<dependency>
  <groupId>org.codehaus.jackson</groupId>
  <artifactId>jackson-mapper-asl</artifactId>
  <version>1.9.13</version>
</dependency>
<dependency>
  <groupId>org.codehaus.jackson</groupId>
  <artifactId>jackson-core-asl</artifactId>
  <version>1.9.13</version>
</dependency>
<dependency>
  <groupId>com.googlecode.json-simple</groupId>
  <artifactId>json-simple</artifactId>
  <version>1.1.1</version> 
</dependency>
<dependency>
  <groupId>io.jsonwebtoken</groupId>
  <artifactId>jjwt</artifactId>
  <version>0.6.0</version>
</dependency>

 

 

 

조회화면 (Controller)

 

@RequestMapping(value ="/gnb04/lnb02/snb04/list.do")
public String snb04_list(
        HttpServletRequest request,
        ModelMap model) throws Exception {
        
    return "tiles:bsite/gnb04/lnb02/snb04/list";
}
 

이 페이지의 주요 기능은 AJAX이기에, 조회화면의 컨트롤러는 하기 때문에 별거 없습니다. 

그냥 url하고 return 값만 설정해주시면 됩니다.

 

 

 

조회화면 (HTML)

 

<form name="inputForm" id="inputForm" method="post"class="form-horizontal">
<input type="hidden" id="resv_birth" name="resv_birth" value="" />
<div id="contents">
<div class="con_box">
    <p class="mb_20">교육생 이름과 생년월일로 검색하여 출력하시면 됩니다.</p>
    <div class="bbs_write">
        <table class="tb_write">
            <caption>
            <strong>게시판</strong>
        </caption>
            <colgroup>
                <col style="width:20%;">
                <col style="width:30%;">
                <col style="width:20%;">
                <col style="width:30%;">
            </colgroup> 
                <tbody>
                    <tr>
                        <th>이름</th>
                        <td><input type="text" id="resv_name" name="resv_name" class="form_field"></td>
                        <th>생년월일</th>
                        <td><input type="text" id="xbirth" class="form_field" maxlength="8" placeholder="-는 제외해주세요. (예시 : 20220214)"></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="btn_w"><button type="button" class="blueS" onclick="inquiry();">조회</button></div>
        <ul class="mt_20">
            <li>* 2022년 2월 이전 교육 이수자만 조회 가능합니다.</li>
            <li>* 2022년 3월 신규 온라인 교육 시스템을 통한 교육 이수자는 온라인 교육 시스템에서 조회 부탁드립니다. </li>
        </ul>
</div>
<div class="bbs_list" style="display:none">
  <table class="list_1" width="100%" cellspacing="0" summary="">
      <caption></caption>
          <colgroup>
          <col/>
          <col/>
          <col/>
          <col/>
          <col/>
      </colgroup>
      <thead id="addTable">
          <tr>
              <th>교육일</th>
              <th>과정명</th>
              <th>업체명</th>
              <th>이수번호</th>
              <th>인쇄</th>
          </tr>
      </thead>
  </table>
</div>
 
</div>
</form>

HTML 부분입니다.

여기서는 이름과 생년월일의 값을 받기 위해서 id와 name에 변수를 설정해줍니다.

특이점은 테이블 태그는 display none처리하여 화면에 안보이다가 AJAX 호출때 보일 수 있도록 설정해줍니다.

 

 

 

 

조회화면 (AJAX Controller)

 

@RequestMapping(value = "/gnb04/lnb02/snb04/checkAjax.do")
@ResponseBody
public String select_snb04_ajax(
    @RequestBody String filterJSON,
    HttpServletResponse response,
    ModelMap model ) throws Exception {
 
JSONObject obj = new JSONObject();
List<tbl_reserveVO> reserveData  = null;
response.setContentType("text/html; charset=UTF-8");
PrintWriter out = response.getWriter();
 
try{            
    ObjectMapper mapper = new ObjectMapper();
    tbl_reserveVO searchVO = (tbl_reserveVO)mapper.readValue(filterJSON,new TypeReference<tbl_reserveVO>(){ });
    
    reserveData = reserveService.getUseReserveData(searchVO);
    
    obj.put("reserveData", reserveData);
    
}catch(Exception e){
    System.out.println(e.toString());
    obj.put("res", "error");
    
}
 
out.print(obj);
return null;
}

AJAX로 JSON 형식으로 필요한 데이터를 읽어옵니다.

AJAX 불러오는 기능은 아래 제이쿼리파트에 있습니다.

 

 

 

반응형

 

 

 

조회화면 (JQuery)

 

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
 
<c:set var="path" value="${pageContext.request.contextPath}" />
 
<script type="text/javascript">
var path = "${pageContext.request.contextPath }";
 
$(document).ready(function() {
 
});
 
 
function inquiry(){
 
if($("#resv_name").val() == ""){
    alert("이름을 작성해주세요.");
    $("#resv_name").focus();
    return false;
}
 
if($("#xbirth").val() == ""){
    alert("생년월일을 작성해주세요.");
    $("#xbirth").focus();
    return false;
}
 
var birth = $("#xbirth").val();
var resv_birth = birth.substring(0, 4) + "-" + birth.substring(4, 6) + "-" + birth.substring(6, 8);
var resv_gubun = $("#resv_gubun").val();
var resv_name = $("#resv_name").val();
 
if(!confirm("조회하시겠습니까?")){
    return false;
}
 
var submitObj = new Object();
submitObj.resv_birth= resv_birth;
submitObj.resv_name= resv_name;
 
$.ajax({ 
  url: path+"/gnb04/lnb02/snb04/checkAjax.do", 
  type: "POST", 
  contentType: "application/json;charset=UTF-8",
  data:JSON.stringify(submitObj),
  dataType : "json",
  progress: true
 }) 
 .done(function(data) {
     
     $("#addTable").children(".tagDel").remove();
     $(".bbs_list").show();
     
     var addTag = "";
     for(var k in data.reserveData){
    
      var obj = data.reserveData[k];
      var resv_name = obj.resv_name;
      var resv_birth = obj.resv_birth;
      var ctf_biz_name = obj.ctf_biz_name;
      var ctf_number = obj.ctf_number;
      var ctf_edu_edate = obj.ctf_edu_edate;
      var resv_program_type_name = obj.resv_program_type_name;
      
      addTag = '<tr class="tagDel">'
               + '<td>'+ctf_edu_edate+'</td>'
               + '<td>'+resv_program_type_name+'</td>'
               + '<td>'+ctf_biz_name+'</td>'
               + '<td>'+ctf_number+'</td>'
               + '<td><button type="button" class="blueS" onclick="printPopUp(\''+resv_name+'\',\''+resv_birth+'\');">인쇄</button></td>'
               + '</tr>';
      $("#addTable").append(addTag);
     }
 }) 
 .fail(function(e) {  
     alert("FAIL - "+e);
 }) 
 .always(function() { 
 }); 
 
return true;
}
 
function printPopUp(name,birth){
 $("#resv_birth").val(birth);
 $("#resv_name").val(name);
 $("#inputForm").one("submit", function() {
        window.open('','pop_target','width=1500, height=1000, top=0, left=0, resizable=no, status=no, menubar=no, toolbar=no, scrollbars=yes, location=no');
        this.action = "${path}/gnb04/lnb02/snb04/list_popup.do";
        this.method = 'POST';
        this.target = 'pop_target';
    }).trigger("submit");
}
 
</script>

 

조회 (AJAX 테이블 호출)

 

조회 버튼를 통해서 inquiry함수를 호출합니다.

처음 유효성 검사를하고, 각각의 값을 오브젝트 변수에 넣어줍니다.

AJAX로 데이터를 불러주면서 테이블을 show를 통해 보여줍니다.

for문을 통해서 데이터를 변수에 호출하여

addTag에 데이터값을 HTML 안에 넣어서 태그를 만들어주고

thead의 뒤에 넣어서 데이터가 들어갈 수 있도록 합니다.

 

 

인쇄 (팝업창 호출)

 

인쇄 버튼을 통해서 printPopUp함수를 호출합니다.

AJAX로 호출한 데이터를  printPopUp함수에 넣어줘서 데이터를 활용합니다.

form의 아이디 inputForm를 불러서 window.open으로 팝업을 불러주고

action, method를 지정해준다음 submit을 해줍니다.

 

 

 

팝업창 (Controller)

 

@RequestMapping(value ="/gnb04/lnb02/snb04/list_popup.do", method = RequestMethod.POST)
public String snb04_list_popup(
        @ModelAttribute("searchVO") tbl_reserveVO searchVO,
        HttpServletRequest request,
        ModelMap model) throws Exception {
    
    return "tilespopup:bsite/gnb04/lnb02/snb04/list_popup";
}

함수 데이터는 @ModelAttribute("searchVO") 로  들어가 있을 겁니다. 

상황에 따라 여기에 데이터를 추가로 불르시면 됩니다.

 

 

 

팝업창 (HTML(JSP))

 

 

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
 
<script type="text/javascript">
 
$(document).ready(function() {    
    window.print();
});
 
</script>
 
 
이름 : ${searchVO.resv_name } </br>
생년월일 : ${searchVO.resv_birth }
 
 

아래 데이터를 넣어주고

window..print(); 를 통해 인쇄화면을 불러들이면 끝입니다!

 

 

 

 

 

 

 

아래는 팝업창값을 부모창에 전달하는 방법을 정리한 글입니다.

https://chobopark.tistory.com/5

[Spring]팝업 리스트 값을 부모창에 전달하는 방법 (영상 有)