본문 바로가기
Spring

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

by GoodDayDeveloper 2020. 2. 26.
반응형

[2021년 09월 30일에 수정하였습니다]

 

많이들 사용하는 팝업에서 리스트 체크값을 부모창에 전달하는 방법에 대해 이야기해보겠습니다.

전에 작성했던 페이지 내용이 많이 부실해서 새로 작성하였습니다..

구현 화면입니다. 

팝업창을 눌러서 팝업창의 리스트의 체크값을 선택한다음

선택을 누르면 부모창에 리스트가 뜨고 삭제를 할 수 있는 기능입니다.

 

 

create.jsp

등록화면입니다. (검색 부분은 코드가 길어지기 때문에 코드에서 제외했습니다.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="path" value="${pageContext.request.contextPath}" />
 
<script type="text/javascript">
    var path = "${pageContext.request.contextPath }";
 
    $(function(){
        $("#resTb tbody").append($("#resInfoTr").html());


    });
    
    function resOpenPopup(){
        var pop = window.open("${path}/list_popup.do?","resPopup","width=1100,height=900, scrollbars=yes, resizable=yes"); 
        pop.focus();
    }
        
</script>
 
 
<div id="contAreaBox">
<form name="inputForm" id="inputForm" method="post" onsubmit="return _onSubmit(); return false;" action="${path}/create_action.do">  
    <h4><i class="bi bi-arrow-right-circle"></i> 프로젝트 등록</h4>
    <div class="text-center">
        <a href="javascript:void(0);" onclick="resOpenPopup();return false;" class="btn btn-dark btn-lg">팝업창</a>
    </div>
    <h4 class="mt-5"><i class="bi bi-arrow-right-circle"></i> 리스트</h4>
    <div class="table-responsive mt-2">
        <table id="resTb" class="table table-striped table-bordered text-center tbl_List">
            <thead>
                <tr>
                    <th>번호</th>
                    <th>항목1</th>
                    <th>항목2</th>
                    <th>항목3</th>
                    <th>항목4</th>                            
                    <th>수량</th>
                    <th>취소</th>
                </tr>
            </thead> 
            <tbody>
            </tbody>
        </table>
    </div>
    <%-- 버튼 --%>
    <div class="form-btn mt-3">
        <input type="submit" value="<spring:message code='btn.save' text='저장' />" class="btn btn-dark btn-lg" />
        <a href="${path}/specimen/store/list.do" class="btn btn-warning btn-lg"><spring:message code="btn.cancel" text="취소" /></a>
    </div>
</form>
</div>
<div class="table-responsive">
    <table class="table table-striped table-bordered text-center tbl_List" style="display:none;">        
        <tbody id="resTr">
            <tr>
                <td name="no"></td>
                <td name="taxonIDName"></td>
                <td name="rf_code_fbcc"></td>
                <td name="r_comm_scname"></td>
                <td name="r_comm_cname"></td>                
                <td ><input type="text" name="fss_count" value="1" style="width:100px;" maxlength="3"/></td>
                <td name="cancle"> <a href="javascript:void(0);" onclick="trRemove(this);return false;" class="btn btn-warning btn-sm">취소</a> </td>
            </tr>
        </tbody>
    </table>
</div>
<div class="table-responsive">
    <table class="table table-striped table-bordered text-center tbl_List" style="display:none;">        
        <tbody id="resInfoTr">
            <tr id="noRes">
                <td colspan="7">팝업창에서 항목을 선택해주세요.</td>
            </tr>
        </tbody>
    </table>
</div>
 cs

 

보통의 리스트와 다른점은,

리스트 tbody를 비워줍니다. 그곳에 팝업의 선택한 리스트가 들어가야하기 때문이죠.

그리고 밑에 두개의 테이블을 만들어줍니다. 하나는 팝업의 선택한 리스트와 또 하나는, 초기 화면시 공백 리스트입니다.

그리고 이것은 display:none을 넣어줘서 필요할 때만 사용하도록 합니다.

페이지 실행시 실행되는 function 함수에 기본 테이블의 id값 resTb의 tbody부분에 팝업을 선택해달라는 초기 공백 리스트의 id값인 resInfoTr을 넣어줍니다.

그리고 팝업창을 열수 있도록 resOpenPopup 함수에 window.open에 url 팝업 사이즈 정보 등을 넣어주도록 합니다.

 

 

list_popup.jsp

 

팝업화면입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="path" value="${pageContext.request.contextPath}" />
<script>
var path = "${pageContext.request.contextPath }";
$(function(){
$("#check_all").click(function(){
var chk = $(this).is(":checked");
if(chk) $("#resTb input[name='chk_res']").prop('checked', true);
else  $("#resTb input[name='chk_res']").prop('checked', false); 
});
});
 
function selectItem(){
if($("#resTb input[name='chk_res']:checked").length == 0){
alert("체크할 리스트를 선택해주세요.");
return false;
}
 
var resArr = new Array();
$("#resTb input[name='chk_res']:checked").each(function(index) {
var organismID = $(this).val();
var resObj = new Object();
$tr = $("#tr_"+organismID);
resObj.r_idx             = $tr.find("input[name='r_idx']").val();
resObj.r_code             = $tr.find("input[name='r_code']").val();
resObj.rf_idx           = $tr.find("input[name='rf_idx']").val();
resObj.r_reg_date         = $tr.find("input[name='r_reg_date']").val();
resObj.r_comm_scname     = $tr.find("input[name='r_comm_scname']").val();
resObj.r_comm_cname     = $tr.find("input[name='r_comm_cname']").val();
resObj.rf_code_fbcc = $tr.find("input[name='rf_code_fbcc']").val();
resObj.taxonIDName             = $tr.find("input[name='taxonIDName']").val();
 
resArr.push(resObj);
});
window.opener.setResList(resArr);
window.close();
}
</script> 
 
<div class="card mt-3">
<div class="card-body">
<div class="table-responsive mt-2 ">
<table id="resTb" class="table table-striped table-bordered text-center">
<caption>LIST</caption>
    <colgroup>
        <col width="5%" />
        <col width="8%" />
        <col />
        <col />
        <col />
    </colgroup>
<thead>
    <tr>
        <th><input type="checkbox" id="check_all" /></th>
        <th>번호</th>
        <th>항목1</th>
        <th>항목2</th>
        <th>항목3</th>
    </tr>
</thead>
<tbody>
    <c:forEach var="result" items="${resultList}" varStatus="status">
        <tr id="tr_${result.organismID}">
            <input type="hidden" name="r_code" value="${result.catalogNumber}" />
            <input type="hidden" name="rf_idx" value="${result.organismID}" />
            <input type="hidden" name="r_idx" value="${result.organismID}" />
            <input type="hidden" name="rf_code_fbcc" value="${result.catalogNumber}" />
            <input type="hidden" name="r_reg_date" value="${result.registrationDate}" />
            <input type="hidden" name="r_comm_scname" value="${result.scientificName}" />
            <input type="hidden" name="r_comm_cname" value="${result.koreanName}" />
            <input type="hidden" name="taxonIDName" value="${result.taxonIDName}" />
            
            
            <td><input type="checkbox" name="chk_res" value="${result.organismID}" /></td>
            <td><c:out value="${status.index+1 }"/></td>
            <td class="taxonIDName"><c:out value="${result.taxonIDName}"/></td>
            <td class="scientificName"><c:out value="${result.scientificName}"/></td>
            <td class="koreanName"><c:out value="${result.koreanName}"/></td>
        </tr>
    </c:forEach>
    <c:if test="${fn:length(resultList) == 0}">
        <tr>
            <td colspan="5"><spring:message code="list.noResult" text="조회결과가 없습니다." /></td>
        </tr>
    </c:if>
    </tbody>
</table>
</div>
<div class="d-flex justify-content-between">>
</div>
<a href="#" onclick="selectItem();return false;" class="btn btn-dark btn-lg">프로젝트 선택</a>
</div>
</div>
</div>
 
 cs

 

항목에 check_all이라는 전체 체크할 수 있는 기능을 만들어 function함수에 클릭함수를 넣어서,

check_all이 체크되어 있으면 전체 체크가 될수 있도록 설정합니다.

그리고 선택한 체크값을 프로젝트 선택 버튼을 눌러 selectItem함수로 이동하게 됩니다.

selectItem함수에서는 체크값이 없을 시 체크하라는 유효성 검사가 있으며,

배열에 테이블의 체크된 값을 for문으로 돌려서 필요한 값들을 배열에 담아준 다음,

setResList함수에 넣어 부모창에 내보내줍니다.

 

 

반응형

 

 

create.jsp

 

기존 create.jsp에 스크립트를 추가한 화면입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function setResList(resArr){
    if($("#noRes").length > 0) $("#noRes").remove();
 
    for(var i=0; i<resArr.length; i++){
            
        var trCnt = $("#resTb tbody tr").length;
        $("#resTb tbody").append($("#resTr").html());
        var lastTr = $("#resTb tbody tr:last");
        $(lastTr).attr("id","tr_"+resArr[i].rf_idx);                
        $(lastTr).find("td[name='taxonIDName']").append(resArr[i].taxonIDName);
        $(lastTr).find("td[name='rf_code_fbcc']").append(resArr[i].rf_code_fbcc);
        $(lastTr).find("td[name='r_comm_scname']").append(resArr[i].r_comm_scname);
        $(lastTr).find("td[name='r_comm_cname']").append(resArr[i].r_comm_cname);
    }
}
 
function trRemove(ths){         
    var $tr = $(ths).parents("tr");
    $tr.remove(); 
}
 cs

 

팝업에서 가지고 온 setResList에 담아온 resArr의 배열을 활용할 예정입니다.

우선 팝업창을 선택해달라는 tr태그를 지워준 다음,

배열의 for문을 돌려 본문 리스트인 resTb tbody의 tr에 last를 넣어 붙여주면 됩니다.

그리고 삭제버튼은 trRemove를 통해 remove메소드를 이용해서 삭제해주시면 됩니다.

 

 

구현 완료 화면

 

 

create.jsp 전체소스

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="path" value="${pageContext.request.contextPath}" />
 
<script type="text/javascript">
    var path = "${pageContext.request.contextPath }";
    
 
    $(function(){
        $("#resTb tbody").append($("#resInfoTr").html());
 
    });
    
    function resOpenPopup(){
        var searchDna =  $("input:radio[name='fs_itype']:checked").val();        
        var qs = "isPopup=Y";
        qs+="&popMenu=check";        
        if(searchDna=="2"){
            qs+="&searchDna=Y";
        }else{
            qs+="&searchDna=N";
        }
        var pop = window.open("${path}/specimen/organism/list_popup.do?"+qs,"resPopup","width=1100,height=900, scrollbars=yes, resizable=yes"); 
        pop.focus();
    }
    
function setResList(resArr){
    if($("#noRes").length > 0) $("#noRes").remove();
 
    for(var i=0; i<resArr.length; i++){
            
        var trCnt = $("#resTb tbody tr").length;
        $("#resTb tbody").append($("#resTr").html());
        var lastTr = $("#resTb tbody tr:last");
        $(lastTr).attr("id","tr_"+resArr[i].rf_idx);
        $(lastTr).find("td[name='no']").append(trCnt+1); 
        $(lastTr).find("td[name='no']").find("input[name='r_idx']").val(resArr[i].r_idx);
        $(lastTr).find("td[name='no']").find("input[name='rf_idx']").val(resArr[i].rf_idx);                
        $(lastTr).find("td[name='taxonIDName']").append(resArr[i].taxonIDName);
        $(lastTr).find("td[name='rf_code_fbcc']").append(resArr[i].rf_code_fbcc);
        $(lastTr).find("td[name='r_comm_scname']").append(resArr[i].r_comm_scname);
        $(lastTr).find("td[name='r_comm_cname']").append(resArr[i].r_comm_cname);
    }
}
 
function trRemove(ths){         
    var $tr = $(ths).parents("tr");
    $tr.remove(); 
}
        
</script>
 
 
 
<div id="contAreaBox">
<form name="inputForm" id="inputForm" method="post" onsubmit="return _onSubmit(); return false;" action="${path}/preserve/manage/create_action.do">  
    <input type="hidden" id="fs_state" name="fs_state" value="1" /><!-- 진행중으로 초기 세팅 --> 
    <input type="hidden" id="fs_itype" name="fs_itype" value="1" />
    <input type="hidden" id="fs_division" name="fs_division" value="1" />
    
    <h4><i class="bi bi-arrow-right-circle"></i> 프로젝트 등록</h4>
    <div class="table-responsive tbl_Form mt-2">
        <table class="table w-100">
            <caption>프로젝트 등록</caption>
            <colgroup>
                <col width="15%" />
                <col width="35%" />
                <col width="15%" />
                <col width="35%" />
            <colgroup>
 
            <tr>
                <th>제목</th>
                <td colspan="3"> <input type="text" name="fs_title" id="fs_title" maxlength="100" class="form-control"/> </td>
            </tr>    
            <tr>
                <th>등록일</th>
                <td><input type="text" name="fs_date" id="fs_date" value="${today}" class="form-control" readonly="readonly"/> </td>
                <th>등록자</th>
                <td><input type="text" name="re_reg_name" id="re_reg_name" value="${loginVO.name}" readonly="readonly" class="form-control"/> </td>
            </tr>
            <tr>
                <th><spring:message code="bank.prsvManage.etc" text="비고" /></th>
                <td colspan="3"> <input type="text" name="fs_etc" id="fs_etc" maxlength="100" class="form-control"/> </td>
            </tr>    
        </table>
    </div>
    <div class="text-center">
        <a href="javascript:void(0);" onclick="resOpenPopup();return false;" class="btn btn-dark btn-lg">팝업창</a>
    </div>
    
 
    <h4 class="mt-5"><i class="bi bi-arrow-right-circle"></i> 리스트</h4>
    <div class="table-responsive mt-2">
        <table id="resTb" class="table table-striped table-bordered text-center tbl_List">
            <thead>
                <tr>
                    <th>번호</th>
                    <th>항목1</th>
                    <th>항목2</th>
                    <th>항목3</th>
                    <th>항목4</th>                            
                    <th>수량</th>
                    <th>취소</th>
                </tr>
            </thead> 
            <tbody>
                
            </tbody>
        </table>
    </div>
 
 
    <%-- 버튼 --%>
    <div class="form-btn mt-3">
        <input type="submit" value="<spring:message code='btn.save' text='저장' />" class="btn btn-dark btn-lg" />
        <a href="${path}/specimen/store/list.do" class="btn btn-warning btn-lg"><spring:message code="btn.cancel" text="취소" /></a>
    </div>
</form>
</div>
 
        
<div class="table-responsive">
    <table class="table table-striped table-bordered text-center tbl_List" style="display:none;">        
        <tbody id="resTr">
            <tr>
                <td name="no">
                    <input type="hidden" name="r_idx" value="0" />  <!-- 자원번호 -->
                    <input type="hidden" name="rf_idx" value="0" /> <!-- 은행자원번호 -->
                     <input type="hidden" name="fi_idx" value="0" /><!-- 부모키 현재 사용안함 -->
                </td>
                <td name="taxonIDName"></td>
                <td name="rf_code_fbcc"></td>
                <td name="r_comm_scname"></td>
                <td name="r_comm_cname"></td>                
                <td ><input type="text" name="fss_count" value="1" style="width:100px;" onKeyPress="return isNumberKey(event);" onblur="hanReplaceValueOnBlur(this);" maxlength="3"/></td>
                <td name="cancle"> <a href="javascript:void(0);" onclick="trRemove(this);return false;" class="btn btn-warning btn-sm"><spring:message code="btn.cancel" text="취소" /></a> </td>
            </tr>
        </tbody>
    </table>
</div>
 
<div class="table-responsive">
    <table class="table table-striped table-bordered text-center tbl_List" style="display:none;">        
        <tbody id="resInfoTr">
            <tr id="noRes">
                <td colspan="7">팝업창에서 항목을 선택해주세요.</td>
            </tr>
        </tbody>
    </table>
</div>
 
 
 cs

 

반응형
저작자표시

'Spring' 카테고리의 다른 글

HttpServletRequest 개념 및 사용법  (2) 2020.06.20
카카오 지도 API를 활용하여 지도 사용하기  (0) 2020.06.14
Controller에서 AJAX로 받아 활용하는 방법 (AJAX활용방법)  (2) 2020.06.11
CRUD 스프링 흐름 정리  (0) 2020.06.10
[Spring] MVC1과 MVC2의 차이!  (0) 2020.04.15

관련글

댓글

티스토리툴바