주소검색(API연계) 추가

main
이범준 1 year ago
parent 2857d048c1
commit c40e0fc638

@ -336,6 +336,38 @@
// 우편번호 검색 // 우편번호 검색
fnZip${pageName} = () => { fnZip${pageName} = () => {
var callbackFuncName = "fnZipReturn${pageName}";
var popupWidth = 900;
var popupHeight = 700;
var popupX = (window.screen.width / 2) - (popupWidth / 2);
var popupY= (window.screen.height / 2) - (popupHeight / 2);
window.open(
wctx.url("/resources/html/searchAddr.html"+"?callbackFuncName="+callbackFuncName)
,"searchAddr"
,'status=no, height=' + popupHeight + ', width=' + popupWidth + ', left='+ popupX + ', top='+ popupY
);
}
// 우편번호 검색 결과
fnZipReturn${pageName} = (obj) => {
$("#addr--${pageName}").val(obj.ADDR); // 주소
$("#zip--${pageName}").val(obj.ZIP); // 우편번호
$("#dtlAddr--${pageName}").val(obj.DTL_ADDR); // 상세 주소
$("#roadNmCd--${pageName}").val(obj.ROAD_NM_CD); //
$("#udgdSeCd--${pageName}").val(obj.UDGD_SE_CD); //
$("#bmno--${pageName}").val(obj.BMNO); //
$("#bsno--${pageName}").val(obj.BSNO); //
$("#bldgMngNo--${pageName}").val(obj.BLDG_MNG_NO); //
$("#stdgCd--${pageName}").val(obj.STDG_CD); //
$("#mtnSeCd--${pageName}").val(obj.MTN_SE_CD); //
$("#mno--${pageName}").val(obj.MNO); //
$("#sno--${pageName}").val(obj.SNO); //
$("#dongCd--${pageName}").val(obj.DONG_CD); //
} }
// 화면에서 보여주는 주소입력 부분 수정 // 화면에서 보여주는 주소입력 부분 수정

@ -0,0 +1,296 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="/resources/image/favicon.ico" />
<!-- Fonts -->
<link rel="stylesheet" href="/resources/font/publicsans/fontface.css" />
<!-- Icons. Uncomment required icon fonts -->
<link rel="stylesheet" href="/resources/3rd-party/sneat/fonts/boxicons.css" />
<link rel="stylesheet" href="/resources/3rd-party/sneat/fonts/fontawesome.css" />
<link rel="stylesheet" href="/resources/3rd-party/sneat/fonts/flag-icons.css" />
<link rel="stylesheet" href="/resources/css/fims/framework/common/xit-icon.css" />
<!-- Core CSS -->
<link rel="stylesheet" href="/resources/css/fims/framework/common/xit-core.css" />
<link rel="stylesheet" href="/resources/3rd-party/sneat/css/theme-default.css" />
<link rel="stylesheet" href="/resources/3rd-party/sneat/css/docs.css" />
<link rel="stylesheet" href="/resources/css/fims/framework/common/xit-core-extend.css" />
<!-- Vendors CSS -->
<link rel="stylesheet" href="/resources/3rd-party/sneat/libs/perfect-scrollbar/perfect-scrollbar.css" />
<link rel="stylesheet" href="/resources/css/styles.css" />
<link rel="stylesheet" href="/resources/css/fims/framework/common/common.css"/>
<link rel="stylesheet" href="/resources/lib/fims/framework/jquery-ui/1.13.2/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" href="/resources/lib/fims/framework/datepicker/datepicker.css" />
<title>주소검색</title>
</head>
<body>
<div class="card m-4 p-3">
<form name="form" id="form" method="post">
<input type="hidden" name="resultType" value="json" /> <!-- 요청 변수 설정 (검색결과형식 설정, json) -->
<input type="hidden" name="confmKey" value="U01TX0FVVEgyMDE3MDQwMzIwMzUzMjIwMzI2" /><!-- 요청 변수 설정 (승인키) -->
<input type="hidden" name="countPerPage" value="10"/><!-- 요청 변수 설정 (페이지당 출력 개수. countPerPage 범위 : 0 < n <= 100) -->
<input type="hidden" id="currentPage" name="currentPage" value="1"/> <!-- 요청 변수 설정 (현재 페이지. currentPage : n > 0) -->
<div class="container-search">
<div class="row g-1">
<div class="col-12 d-flex justify-content-center">
<input type="text" id="dummy" value="" hidden />
<input type="text" name="keyword" class="form-control w-px-400"
placeholder="예) 도움6로 42, 국립중앙박물관, 상암동 1595, 초성검색"
value="" onkeydown="enterSearch();"/><!-- 요청 변수 설정 (키워드) -->
<button type="button" class="btn btn-search ms-2" onClick="getAddr(1);">검색</button>
</div>
</div>
</div>
<div id="list" class="mt-4">
<div class="card-datatable text-nowrap">
<div class="dataTables_wrapper dt-bootstrap5 no-footer">
<div class="table-responsive" style="height:400px;overflow-x: scroll;overflow-y: scroll;">
<table id="DataTables_Table_0" class="table-layout-fixed datatables-ajax table table-bordered dataTable no-footer">
<thead>
<tr>
<th style="width: 650px;">주소</th>
<th style="width: 100px;">우편번호</th>
</tr>
</thead>
<tbody id="addrTbody">
</tbody>
<template id="addrRow">
<tr data-key="{TEMP_ID}">
<td onclick="{onclick}" class="text-start">
<strong class="fs-4">{roadAddr}</strong><br/>{jibunAddr}
</td>
<td onclick="{onclick}" class="text-center">{zipNo}</td>
<td class="dummy-td"></td>
</tr>
</template>
<template id="addrNotFound">
<tr>
<td valign="top" colspan="3" class="dataTables_empty text-center">조회 결과가 없습니다.</td>
</tr>
</template>
</table>
</div>
</div>
</div><!-- 검색 결과 리스트 출력 영역 -->
<div>
<span class="container-page-btn">
<div class="d-flex flex-row justify-content-between">
<label id="addrPagingPagingInfo" class="dataTables_info" role="status" aria-live="polite">
</label>
<ul id="addrPaging" class="pagination pagination-primary">
</ul>
</div>
</span>
</div>
</div>
</form>
<div id="formBottom" style="display:none">
<div>
기본주소 :
<span id="mainAddr"></span>
<br/>
상세주소 :
<input type="text" id="etcAddr" name="etcAddr" class="form-control w-px-400" />
<button type="button" class="btn btn-primary" onClick="fnReturn();">확인</button>
</div>
</div>
</div>
<script type="text/JavaScript" src="/resources/3rd-party/sneat/libs/jquery/jquery.js" ></script>
<script src="/resources/3rd-party/sneat/libs/popper/popper.js"></script>
<script src="/resources/3rd-party/sneat/js/bootstrap.js"></script>
<script src="/resources/3rd-party/sneat/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
<script src="/resources/3rd-party/sneat/libs/hammer/hammer.js"></script>
<script src="/resources/3rd-party/sneat/libs/i18n/i18n.js"></script>
<script src="/resources/3rd-party/sneat/js/menu.js"></script>
<script src="/resources/3rd-party/sneat/libs/jstree/jstree.js"></script>
<script src="/resources/3rd-party/jstree/jstree-support.js"></script>
<script src="/resources/3rd-party/sneat/libs/chartjs/chartjs.js"></script>
<script src="/resources/lib/fims/framework/jquery-ui/1.13.2/jquery-ui.js"></script>
<script src="/resources/js/base/base.js"></script>
<script src="/resources/js/base/base-fims.js"></script>
<script src="/resources/js/base/dataset.js"></script>
<script language="javascript">
var callbackFuncName = location.search.split("=")[1];
/**************************************************************************
* DatasetControl
**************************************************************************/
var addrControl = new DatasetControl({
urls : { load : "", getInfo : "" },
dataGetter : obj => obj.juso, appendData:false,
keymapper : info => info ? info.TEMP_ID : "",
formats: {}
});
/**************************************************************************
* DatasetControl.on
**************************************************************************/
addrControl.onDatasetChange = (obj) => {
renderAddrList(obj.common.totalCount);
$("#addrPaging").setPaging({
list: addrControl.dataset,
prefix: "addrPaging",
start: (((obj.common.currentPage - 1) * obj.common.countPerPage) + 1),
totalSize: obj.common.totalCount,
fetchSize: obj.common.countPerPage,
func: "getAddr({index})"
});
}
function renderAddrList(total){
var addrList = addrControl.dataset;
var empty = addrList.empty;
var notFound = [document.getElementById("addrNotFound").innerHTML];
var found = document.getElementById("addrRow").innerHTML;
var replacer = (str, dataItem) => str
.replace(/{onclick}/gi, "fnClickAddrList('" + dataItem.getValue("TEMP_ID") + "');")
var trs = empty ? notFound : addrList.inStrings(found, replacer);
$("#addrTbody").html(trs.join());
}
function getAddr(pageNum){
// 적용예 (api 호출 전에 검색어 체크)
if (!checkSearchedWord(document.form.keyword)) {
return ;
}
$("#currentPage").val(pageNum);
$.ajax({
url :"https://business.juso.go.kr/addrlink/addrLinkApiJsonp.do" //인터넷망
,type:"post"
,data:$("#form").serialize()
,dataType:"jsonp"
,crossDomain:true
,success:function(jsonStr){
$("#list").show();
$("#formBottom").hide();
var errCode = jsonStr.results.common.errorCode;
var errDesc = jsonStr.results.common.errorMessage;
if(errCode != "0"){
alert(errCode+"="+errDesc);
}else{
if(jsonStr != null){
var tempId = 0;
jsonStr.results.juso.forEach((item) => item.TEMP_ID = tempId++);
addrControl.setData(jsonStr.results);
}
}
}
,error: function(xhr,status, error){
alert("에러발생");
}
});
}
//특수문자, 특정문자열(sql예약어의 앞뒤공백포함) 제거
function checkSearchedWord(obj){
if(obj.value.length >0){
//특수문자 제거
var expText = /[%=><]/ ;
if(expText.test(obj.value) == true){
alert("특수문자를 입력 할수 없습니다.") ;
obj.value = obj.value.split(expText).join("");
return false;
}
//특정문자열(sql예약어의 앞뒤공백포함) 제거
var sqlArray = new Array(
//sql 예약어
"OR", "SELECT", "INSERT", "DELETE", "UPDATE", "CREATE", "DROP", "EXEC",
"UNION", "FETCH", "DECLARE", "TRUNCATE"
);
var regex;
for(var i=0; i<sqlArray.length; i++){
regex = new RegExp( sqlArray[i] ,"gi") ;
if (regex.test(obj.value) ) {
alert("\"" + sqlArray[i]+"\"와(과) 같은 특정문자로 검색할 수 없습니다.");
obj.value =obj.value.replace(regex, "");
return false;
}
}
}
return true ;
}
function enterSearch() {
var evt_code = (window.netscape) ? ev.which : event.keyCode;
if (evt_code == 13) {
event.keyCode = 0;
getAddr(1); //jsonp사용시 enter검색
}
}
function fnClickAddrList(tempId){
$("#formBottom").show();
$("#mainAddr").html("");
$("#etcAddr").val("");
addrControl.dataset.setCurrent(tempId);
$("#mainAddr").html(addrControl.dataset.getCurrent().roadAddr);
$("#addrTbody").setCurrentRow(tempId);
$("#etcAddr").focus();
}
function fnReturn(){
var addrObj = {};
addrObj = addrControl.dataset.getCurrent();
addrObj.etcAddr = $("#etcAddr").val();
addrObj.ZIP = addrObj.zipNo;
addrObj.ADDR = addrObj.roadAddr;
addrObj.DTL_ADDR = addrObj.etcAddr;
addrObj.ROAD_NM_CD = addrObj.rnMgtSn;
addrObj.UDGD_SE_CD = addrObj.udrtYn;
addrObj.BMNO = addrObj.buldMnnm;
addrObj.BSNO = addrObj.buldSlno;
addrObj.BLDG_MNG_NO = addrObj.bdMgtSn;
addrObj.STDG_CD = addrObj.admCd;
addrObj.MTN_SE_CD = addrObj.mtYn;
addrObj.MNO = addrObj.lnbrMnnm;
addrObj.SNO = addrObj.lnbrSlno;
addrObj.DONG_CD = "";
window.opener[callbackFuncName](addrObj);
window.close();
}
$("#DataTables_Table_0").find("th").resizable({handles : "e"});
$("#list").hide();
</script>
</body>
</html>
Loading…
Cancel
Save