업무관련/스프링
javascript 구분짓는 html 코딩
레임보우
2024. 2. 6. 16:42
html에 script를 코딩하다보면 어디가 어딘지 모를때나
범위를 지정해서 다른 곳에 영향이 가지 않게 코딩을 할수 있는 방법이 있다
또한 공통코드로 활용 할수 있다.
<div id="mypage">
<div id="jspLoad1">
<input type="text" class="in1">
</div>
<div id="jspLoad2">
<input type="text" class="in1">
</div>
</div>이라면
// 상위에 항상 선언
// 여기다 모든걸 넣는다는 개념으로
var _thisVarMain = {};
// jspLoad1 jspLoad2 모두 동작됨
_thisVarMain.body = $("#mypage");
_thisVarMain.body.find(".in1").val("CCC");
// jspLoad1 에 있는 것들중에서 동작됨
_thisVarMain.body1 = $("#jspLoad1");
_thisVarMain.body1.find(".in1").val("AAA");
// jspLoad2 에 있는 것들중에서 동작됨
_thisVarMain.body2 = $("#jspLoad2");
_thisVarMain.body2.find(".in1").val("BBB");
공통코드로도 만들수 있다.
// 상단에 하나의 변수를 선언한다.
// 이곳에 모든 코드를 넣는다
var _thisVarMain = {};
// ajax 호출 공통으로 만들어 놓으면 반복코드가 짧아진다.
_thisVarMain.sendAjax = function(async, url, data, bfFn, afFn){
$.ajax({
type : "post",
url : url,
async : async,
data : data,
dataType: 'json',
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
beforeSend : function(request){
if(bfFn != null) bfFn();
},
success : function(data){},
error : function(request,status,error){
alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
},
complete: function(data, status) {
if(afFn != null) afFn(data.responseJSON);
}
});
};
// 사용법 예시
var async = false;
var url = "/mypage/ajax/mypageBkmkList.do";
var data = {};
data.pageIndex = num;
data.pageUnit = _thisVar.body.find("select[id=pageUnit]").val();
data.pageSize = "10";
data.searchKeyword = _thisVar.body.find("#searchKeyword").val();
data.webMenuId1 = _thisVarMain.isNull(webMenuId1)?"":webMenuId1;
data.webMenuId2 = _thisVarMain.isNull(webMenuId2)?"":webMenuId2;
var bfFn = null;
var afFn = _thisVar.setList;
_thisVarMain.sendAjax(async, url, data, bfFn, afFn);
// null인지 확인하기위한 공통함수
_thisVarMain.isNull = function(str){
if(str == null) return true;
if(str == "null") return true;
if(str == undefined) return true;
if(str == "undefined") return true;
if(str == "") return true;
return false;
};
// isnNull 사용법
if(_thisVarMain.isNull(url)) return;
mypage.jsp 실사용 예시 부모코드
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<%@ include file="/WEB-INF/jsp/cmm/cmmInclude.jsp" %>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/assets/new-publishing/jquery/jquery-3.4.1.js"></script>
<!-- <meta charset="UTF-8"> -->
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<!--taglist-->
<!-- jquery-ui -->
<script type="text/javascript" src="/assets/new-publishing/jquery/jquery-ui.js"></script>
<link rel="stylesheet" href="/assets/new-publishing/css/jquery-ui.css">
<!-- chart -->
<!-- bootstrap-4.3.1-dist -->
<script type="text/javascript"
src="/assets/new-publishing/jquery/bootstrap-5.2.3-dist/js/bootstrap.bundle.js"></script>
<link rel="stylesheet" href="/assets/new-publishing/jquery/bootstrap-5.2.3-dist/css/bootstrap.css">
<!-- bootstrap-datepicker-1.9.0-dist -->
<script type="text/javascript"
src="/assets/new-publishing/jquery/bootstrap-datepicker-1.9.0-dist/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet"
href="/assets/new-publishing/jquery/bootstrap-datepicker-1.9.0-dist/css/bootstrap-datepicker3.css">
<script type="text/javascript"
src="/assets/new-publishing/jquery/bootstrap-datepicker-1.9.0-dist/locales/bootstrap-datepicker.ko.min.js"></script>
<!-- swiper-4.5.0 -->
<script type="text/javascript" src="/assets/new-publishing/jquery/swiper-4.5.0/dist/js/swiper.js"></script>
<link rel="stylesheet" href="/assets/new-publishing/jquery/swiper-4.5.0/dist/css/swiper.css">
<!-- core CSS -->
<script type="text/javascript" src="/assets/new-publishing/jquery/commons.js"></script>
<script defer type="text/javascript" src="/assets/new-publishing/jquery/custum-select.js"></script>
<link rel="stylesheet" href="/assets/new-publishing/css/font.css">
<link rel="stylesheet" href="/assets/new-publishing/css/Epic2023-v1.1/style.css">
<link rel="stylesheet" href="/assets/new-publishing/css/user-define.css">
<link rel="stylesheet" href="/assets/new-publishing/css/custom-style.css">
<link rel="stylesheet" href="/assets/new-publishing/css/default-element.css">
<link rel="stylesheet" href="/assets/new-publishing/css/commons.css">
<link rel="stylesheet" href="/assets/new-publishing/css/custom-modal.css">
<link rel="stylesheet" href="/assets/new-publishing/css/custom-txt.css">
<link rel="stylesheet" href="/assets/new-publishing/css/custom-list.css">
<link rel="stylesheet" href="/assets/new-publishing/css/custum-border.css">
<link rel="stylesheet" href="/assets/new-publishing/css/layout.css">
<link rel="stylesheet" href="/assets/new-publishing/css/device-layout.css">
<!-- User Define CSS -->
<!-- API관리 JS -->
<style>
[class*='form-area-box'] .custom-select{
position: static;
height: 30px;
}
[class*='form-area-box'] .custom-select select{
position: absolute;
right: 0;
top: 0;
z-index: -1000;
width: 0;
height: 0;
}
[class*='form-area-box'] .custom-select button,
[class*='form-area-box'] .custom-select input{
border: 0;
background: #fff0;
padding: 0;
width: 100%;
height: 100%;
text-align: left;
font-size: 13px;
color: inherit;
}
[class*='form-area-box'] .custom-select button{color: var(--gray-600);}
[class*='form-area-box'].size-m .custom-select button{font-size:10px;}
[class*='form-area-box'] .custom-select input+.icons,
[class*='form-area-box'] .custom-select button:before{
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
}
[class*='form-area-box'] .custom-select ul {
/* display: none; */
max-height: 0;
position: absolute;
overflow: hidden;
transition: max-height 0s;
}
[class*='form-area-box'] .custom-select ul.select {
display: block;
position: absolute;
top: calc(100% + 3px);
max-height: 200px;
transition: max-height .5s;
min-width: 100%;
padding: 0;
left: 0;
background: #fff;
border: 2px solid var(--blue-500);
border-radius: 8px;
z-index:1000;
border-top-left-radius: 0;
border-top-right-radius: 0;
overflow:auto;
/* 기본 */
box-shadow: 0px 4px 5px 0px var(--gray-10per);
}
</style>
<title>Page</title>
</head>
<body>
<div id="mypage">
<div class="sub-page-bgimg-3-2">
<img src="/assets/new-publishing/images/BG5.png" alt="" class="img1 d-none d-md-block">
<img src="/assets/new-publishing/images/BG5-m.png" alt="" class="img1 d-md-none">
</div>
<div class="banner sub-page-3-2">
<div class="box">
<div class="top">
<p class="">
<button class="bs-s btn-blue-subtitle d-flex mb-8px round-24px">
<i class="icon-user"></i>
<span>
<sec:authorize access="isAuthenticated()">
<c:choose>
<c:when test="${principal.ofbdUserVO.webRoleId eq 'ROLE000001'}">관리자</c:when>
<c:when test="${principal.ofbdUserVO.webRoleId eq 'ROLE000002'}">기관사용자</c:when>
<c:when test="${principal.ofbdUserVO.webRoleId eq 'ROLE000003'}">기관관리자</c:when>
<c:when test="${principal.ofbdUserVO.webRoleId eq 'ROLE000004'}">대민사용자(비로그인)</c:when>
<c:when test="${principal.ofbdUserVO.webRoleId eq 'ROLE000005'}">연계 관리자</c:when>
<c:when test="${principal.ofbdUserVO.webRoleId eq 'ROLE000006'}">분석서비스사용자</c:when>
<c:when test="${principal.ofbdUserVO.webRoleId eq 'ROLE0000012'}">조기오픈관리자</c:when>
<c:when test="${principal.ofbdUserVO.webRoleId eq 'ROLE0000013'}">해양공간관리계획</c:when>
<c:when test="${principal.ofbdUserVO.webRoleId eq 'ROLE0000018'}">테스트</c:when>
<c:when test="${principal.ofbdUserVO.webRoleId eq 'ROLE0000019'}">대민사용자(로그인)</c:when>
<c:otherwise>일반사용자</c:otherwise>
</c:choose>
</sec:authorize>
</span>
</button>
안녕하세요.
<sec:authorize access="isAuthenticated()">
${principal.ofbdUserVO.userNm}님
</sec:authorize>
</p>
<div class="navigation">
<div class="row">
<div class="col home"><a href="/user/main/index.do"><i class="icon-home-roof F"></i> HOME</a></div>
<div class="col"><i class="icon-angle-right"></i></div>
<div class="col now"><a href="/mypage/data/index.do" class="">마이페이지</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<div class="datum-point">
<div class="sub-menu-bar d-none d-xl-block">
<div class="row">
<div class="col box">
<button type="button" class="mypageBkmk">관심데이터</button>
<button type="button" class="mypageActLog">활동기록</button>
<button type="button" class="mypagedrBrd"> 데이터 요청</button>
<button type="button" class="mypageinqBrd">문의관리</button>
<button type="button" class="mypageMemberUpdate">회원정보 수정</button>
<!-- 외부망 기준 API활용신청은 공공데이터 포탈에서 진행되므로 API관리는 사용되지 않는 메뉴 -->
<!-- <button type="button" class="mypageApi">API관리</button> -->
</div>
<%-- <div class="col suport justify-content-end">--%>
<%-- <!-- <button type="button" class="btn-blue-subtitle bs-md-m">--%>
<%-- <i class="icon-print"></i>--%>
<%-- </button> -->--%>
<%-- </div>--%>
</div>
</div>
<div id="jspLoad"></div>
</div>
</div>
<!-- Modal -->
<div class="custum-modal fade position-xl-center" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="cutum-modal-dialog w-ver6">
<form id="selectPopKeyTkForm" onsubmit="return false;">
<input type="hidden" name="userId" id="userId" value=""/>
<input type="hidden" name="userNm" id="userNm" value=""/>
<div class="modal-content">
<div class="modal-header mb-md-8px">
<div class="d-md-none bar">
<a href="#" class="barbtn" data-custum-modal-dismiss="modal"><span style="display: none;"></span></a>
</div>
<h4 class="modal-title ">
<i class="icon-user-edit"></i><span class="">키인계</span>
</h4>
<button type="button" class="close-btn icon-times F" data-custum-modal-dismiss="modal">
</button>
</div>
<div class="modal-body p-16px">
<div class="form-area-box-input mb-16px size-l size-md-xl">
<label class='fs-md-15px'>인수자(회원)</label>
<div class="row">
<div class="col-2">
<!-- <div class="ele-icon-box p-0"> -->
<input type="hidden" id="memberOption" value="memberId">
<div class="check-radio-box ver1 mr-20px mt-14px">
<input type="radio" name="searchOption" id="memberId" value="memberId" checked>
<label for="memberId" style="font-size: 15px;"><span>아이디</span></label>
</div>
<div class="check-radio-box ver1 mt-14px">
<input type="radio" name="searchOption" id="memberNm" value="memberNm">
<label for="memberNm" style="font-size: 15px;"><span>이름</span></label>
</div>
<!-- <div class="custom-selet" id="customSelect">
<label class="d-none">검색 조건</label>
<button type="button" class="icon-angle-down-small">검색 조건</button>
<select name="memberOption" id="memberOption">
<option value="memberId" selected>아이디</option>
<option value="memberNm">이름</option>
</select>
<ul></ul>
<div class="custom-select" id="customSelect">
<button type="button" class="icon-angle-down-small"></button>
<select name="memberOption" id="memberOption">
<option value="memberId" selected>아이디</option>
<option value="memberNm">이름</option>
</select>
<ul>
<li data-value="memberId" data-icon="icon-id">아이디</li>
<li data-value="memberNm" data-icon="icon-name">이름</li>
</ul>
</div>
</div> -->
<!-- </div> -->
</div>
<div class="col">
<div class="ele-icon-box p-0">
<label for="inputUser" class="d-none">검색대상</label>
<input type="text" name="inputUser" id="inputUser" value="" />
<a href="#" class="search_cfn_click" id="popKeySearch">
<span style="display: none;">검색</span>
<i class="icon-search"></i>
</a>
</div>
</div>
</div>
</div>
<div class="table-box-1 mb-16pk">
<table id="pop_key_tkOvr_table">
<caption>
검색결과
</caption>
<thead class="bs-1 ts-l">
<tr class="px-v-l">
<th scope="col" class="ta_c">아이디</th>
<th scope="col" class="ta_c">이름</th>
<th scope="col" class="ta_c">사용자구분</th>
<th scope="col" class="ta_c">기관</th>
</tr>
</thead>
<tbody class="bs-1 t-t-c ts-m" id="pop_key_tkOvr_tbody">
<tr class="px-v-xl t-t-c">
<td class="ta_c" colspan="4">인수자 아이디 또는 이름을 검색해주세요.</td>
</tr>
</tbody>
</table>
</div>
<!--없는 경우-->
<div class="py-16px text-center" style="display: none;">
<img src="/assets/new-publishing/images/nonesearch.svg" alt="" style="height:80px;" class="d-block d-md-none mx-auto">
<img src="/assets/new-publishing/images/nonesearch.svg" alt="" style="height:120px;" class="d-none d-md-block mx-auto">
<p class="my-8px my-md-16px fs-18px fs-md-24px fw-700 lh-1">검색결과가 없습니다.</p>
<span class="fs-13px fs-md-15px">입력한 사용자 정보를 확인해주세요.</span>
</div>
<div class="bottom-box pt-16px pb-8px pb-md-0">
<div class="row justify-content-center" style="margin: 0 -4px;">
<div class="col col-md flex-grow-0 px-4px white-space-nowrap">
<button type="button" class="bs-m bs-md-l btn-black w-100" data-custum-modal-dismiss="modal">
<i class="icon-times"></i>
<span>닫기</span>
</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<!-- 변경이력 모달 -->
<div class="custum-modal fade position-xl-center" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="cutum-modal-dialog w-ver6">
<div class="modal-content">
<div class="modal-header mb-md-8px">
<div class="d-md-none bar">
<a href="#" class="barbtn" data-custum-modal-dismiss="modal"><span style="display: none;">검색</span></a>
</div>
<h4 class="modal-title ">
<i class="icon-user-edit"></i><span class="">키인계 변경이력</span>
</h4>
<button type="button" class="close-btn icon-times F" data-custum-modal-dismiss="modal">
</button>
</div>
<div class="modal-body p-16px">
<div class="table-box-1 mb-16pk">
<table id="pop_chng_hist_table">
<caption>
인증키 인수인계 목록
</caption>
<thead class="bs-1 ts-l">
<tr class="px-v-l">
<th scope="col" class="ta_c">순번</th>
<th scope="col" class="ta_c">인계자</th>
<th scope="col" class="ta_c">인수자</th>
<th scope="col" class="ta_c">인수일</th>
</tr>
</thead>
<tbody class="bs-1 t-t-c ts-m" id="pop_chng_hist_tbody">
<tr class="px-v-xl t-t-c">
<td class="ta_c" colspan="4">인계 이력이 없습니다.</td>
</tr>
</tbody>
</table>
</div>
<!--없는 경우-->
<div class="py-16px text-center" style="display: none;">
<img src="../images/nonesearch.svg" alt="" style="height:80px;" class="d-block d-md-none mx-auto">
<img src="../images/nonesearch.svg" alt="" style="height:120px;" class="d-none d-md-block mx-auto">
<p class="my-8px my-md-16px fs-18px fs-md-24px fw-700 lh-1">검색결과가 없습니다.</p>
<span class="fs-13px fs-md-15px">조건 검색에서 조건을 수정하여 다시 검색해보세요.</span>
</div>
<div class="bottom-box pt-16px pb-8px pb-md-0">
<div class="row justify-content-center" style="margin: 0 -4px;">
<div class="col col-md flex-grow-0 px-4px white-space-nowrap">
<button class="bs-m bs-md-l btn-black w-100" data-custum-modal-dismiss="modal">
<i class="icon-times"></i>
<span>닫기</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var _thisVarMain = {};
/*document.querySelector('#autocomplet').addEventListener('click',function(e){
document.querySelector('.autocomplet').classList.add('trans');
});
$(document).mouseup(function (e){
var LayerPopup = $(".autocomplet");
if(LayerPopup.has(e.target).length === 0){
LayerPopup.removeClass("trans");
}
});*/
// function mobile_menu(e) {
// e.classList.toggle('trans');
// document.querySelector('.menubox').classList.toggle('trans');
// document.querySelector('.wrap').classList.toggle('mobile-menu-show');
// }
function suportMenu(e) {
if (e == 'left-menu') {
document.querySelector(`.${e}`).classList.toggle('trans');
document.querySelector('.left-search').classList.remove('trans');
} else if (e == 'left-search') {
document.querySelector(`.${e}`).classList.toggle('trans');
document.querySelector('.left-menu').classList.remove('trans');
}
}
function checkedBox(e) {
let $cardBox = document.querySelectorAll('.card-box-img-txt-1');
let $checkedIcon = $('.card-box-img-txt-1>.checked-icon');
$checkedIcon.removeClass("F");
$cardBox.forEach(function (e) {
e.classList.remove('active');
});
e.classList.add('active');
e.children[0].classList.add('F');
}
</script>
<script>
window.addEventListener('DOMContentLoaded', function () {
});
_thisVarMain.sendAjax = function (async, url, data, bfFn, afFn) {
$.ajax({
type: "post",
url: url,
async: async,
data: data,
dataType: 'json',
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
beforeSend: function (request) {
if (bfFn != null) bfFn();
},
success: function (data) {
},
error: function (request, status, error) {
alert("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
},
complete: function (data, status) {
if (afFn != null) afFn(data.responseJSON);
}
});
};
_thisVarMain.isNull = function (str) {
if (str == null) return true;
if (str == "null") return true;
if (str == undefined) return true;
if (str == "undefined") return true;
if (str == "") return true;
return false;
};
_thisVarMain.scrTop = function () {
$('body,html').animate({
scrollTop: 0
}, 0);
}
// 주어진 이름의 쿠키를 반환하는데,
// 조건에 맞는 쿠키가 없다면 undefined를 반환합니다.
const getCookie = (name) => {
let matches = document.cookie.match(new RegExp(
"(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
))
return matches ? decodeURIComponent(matches[1]) : undefined
}
$(document).ready(function () {
const currentPageContent = getCookie('pageContent')
console.log(currentPageContent)
try {//관심데이터에서 쓸 메뉴 정보
_thisVarMain.selectMenuInfo = ${selectMenuInfo};
} catch (e) {
_thisVarMain.selectMenuInfo = null;
}
_thisVarMain.body = $("#mypage");
_thisVarMain.jspLoad = function (url) {
_thisVarMain.body.find("[id=jspLoad]>").remove();
if (_thisVarMain.isNull(url)) return;
_thisVarMain.body.find("[id=jspLoad]").load(url, function () {
});
};
//메뉴클릭
_thisVarMain.body.find(".col.box button").click(function () {
var vMenuNm = $(this).text().trim().replace(/ /g, '');
$(this).parent().find("button.active").removeClass("active");
$(this).addClass("active");
if (vMenuNm === "관심데이터") {
_thisVarMain.jspLoad("/mypage/ajax/mypageBkmk.do");
}
if (vMenuNm === "활동기록") {
_thisVarMain.jspLoad("/mypage/ajax/mypageActLog.do");
}
if (vMenuNm === "데이터요청") {
_thisVarMain.jspLoad("/mypage/ajax/mypagedrBrd.do");
}
if (vMenuNm === "문의관리") {
_thisVarMain.jspLoad("/mypage/ajax/mypageinqBrd.do");
}
if (vMenuNm === "회원정보수정") {
_thisVarMain.jspLoad("/mypage/ajax/mypageMemberUpdate.do");
}
/* if (vMenuNm === "API관리") {
_thisVarMain.jspLoad("/mypage/openApi/mypageApi.do");
} */
});
///////////////////////////////////////////////////////
//시작//////////////////////////////////////////////////
///////////////////////////////////////////////////////
//NMEN000036 관심데이터 NMEN000037 활동기록 NMEN000038 데이터요청 NMEN000039 문의관리 NMEN000040 회원정보수정
_thisVarMain.body.find(".col.box button[class=active]").removeClass("active");
if ("NMEN000036,NMEN000007".indexOf("${menuId}") > -1) {
_thisVarMain.body.find(".col.box button:contains(관심데이터)").addClass("active");
_thisVarMain.jspLoad("/mypage/ajax/mypageBkmk.do");
}
if ("${menuId}" == "NMEN000037") {
_thisVarMain.body.find(".col.box button:contains(활동기록)").addClass("active");
_thisVarMain.jspLoad("/mypage/ajax/mypageActLog.do");
}
if ("${menuId}" == "NMEN000038") {
_thisVarMain.body.find(".col.box button:contains(데이터)").addClass("active");
_thisVarMain.jspLoad("/mypage/ajax/mypagedrBrd.do");
}
if ("${menuId}" == "NMEN000039") {
_thisVarMain.body.find(".col.box button:contains(문의관리)").addClass("active");
_thisVarMain.jspLoad("/mypage/ajax/mypageinqBrd.do");
}
if ("${menuId}" == "NMEN000040") {
_thisVarMain.body.find(".col.box button:contains(회원정보)").addClass("active");
_thisVarMain.jspLoad("/mypage/ajax/mypageMemberUpdate.do");
}
/* if ("${menuId}" == "NMEN000047") {
_thisVarMain.body.find(".col.box button:contains(API)").addClass("active");
_thisVarMain.jspLoad("/mypage/openApi/mypageApi.do");
} */
const subPage = ['mypageBkmk',
'mypageActLog',
'mypagedrBrd',
'mypageinqBrd',
'mypageMemberUpdate']
if (subPage.indexOf(currentPageContent) > -1) {
document.querySelector("." + currentPageContent).click()
}
});
</script>
<script>
$(document).ready(function(){
$("#keyTakeOver").on('click',function(e) {
opnKeyTakeOver();
});
/* $("#memberOption").on("change", function() {
var selectedVal = $(this).val();
console.log("selectedVal", selectedVal)
$("#memberOption").val(selectedVal);
console.log($("memberOption").val())
}); */
const memberOption = $("#memberOption");
memberOption.val("memberId");
$('input[name="searchOption"]').change(function () {
memberOption.val($(this).val());
console.log("memberOptionVal", memberOption.val());
});
});
</script>
</body>
</html>
mypage-bkmk.jsp 자식코드
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/cmm/cmmInclude.jsp"%>
<div class="tab-design-2-1 mb-24px mb-md-16px">
<div class="row"></div>
</div>
<div class="top-box">
<div class="row">
<div class="col d-none d-md-flex"></div>
<div class="col-12 col-md flex-b-md-226px flex-grow-0 white-space-nowrap">
<div class="form-area-box size-l">
<div class="ele-icon-box">
<label for="searchKeyword" style="display: none;"></label>
<input type="text" name="searchKeyword" id="searchKeyword" placeholder="내용입력">
<a href="javascript:void(0);" class="icon-search"><span style="display: none;"></span></a>
</div>
</div>
</div>
<div class="col col-md flex-b-md-116px white-space-nowrap">
<div class="form-area-box size-l">
<div class="ele-icon-box">
<label for="pageUnit" style="display: none;"></label>
<div class="custom-selet">
<button class="icon-angle-down">15개씩 보기</button>
<select id="pageUnit" name="pageUnit" onchange="FCchage(this);_thisVar.fnSearch(1);">
<option value="15">15개 보기</option>
<option value="30">30개 보기</option>
<option value="45">45개 보기</option>
<option value="60">60개 보기</option>
</select>
<ul class=""></ul>
</div>
</div>
</div>
</div>
<div class="col flex-grow-0 flex-b-md-218px white-space-nowrap">
<div class="capsule-box">
<button type="button" class="btn- bs-m tab-tit-1 active" onclick="tab(1);">
<i class="icon-grid-square"></i>
<span class="d-none d-md-flex">카드보기</span>
</button>
<button type="button" class="btn- bs-m tab-tit-2 " onclick="tab(2);">
<i class="icon-list"></i>
<span class="d-none d-md-flex">리스트보기</span>
</button>
</div>
</div>
</div>
</div>
<div class="tab-box mb-40px">
<div id="tab-1" class="on">
<div class="card-list-1 ">
<div class="row"></div>
</div>
</div>
<div id="tab-2" class="">
<div class="card-list-2">
<div class="row"></div>
</div>
</div>
</div>
<div class="paging-box pb-md-32px">
<ul class="">
</ul>
</div>
<div class="py-72px text-center" style="display:none;">
<img src="/assets/new-publishing/images/nonesearch.svg" alt="검색결과가 없습니다." style="height:120px;" class="d-none d-md-block mx-auto">
<p class="my-8px my-md-16px fs-18px fs-md-24px fw-700 lh-1">검색결과가 없습니다.</p>
<span class="fs-13px fs-md-15px">조건 검색에서 조건을 수정하여 다시 검색해보세요.</span>
</div>
<form id="bkmkForm" name="bkmkForm" method="post">
<input type="hidden" id="metaSn" name="metaSn"/>
<input type="hidden" id="histDe" name="histDe"/>
<input type="hidden" id="metaAtrbCode" name="metaAtrbCode"/>
<input type="hidden" id="pageType" name="pageType" value="page"/>
<input type="hidden" id="pWebMenuId" name="pWebMenuId"/>
<input type="hidden" id="rootMenuId" name="rootMenuId"/>
</form>
<script>
var _thisVar = {};
$(document).ready(function() {
_thisVar.body = _thisVarMain.body.find("[id=jspLoad]"); //body
//세팅
_thisVar.setMenuInfo = function(){
var vHtml = "";
///////////////////////////////////////////////////////
//메뉴세팅///////////////////////////////////////////////
///////////////////////////////////////////////////////
$.each(_thisVarMain.selectMenuInfo, function(idx, data){
if(data.level == 0 && data.webMenuId1 == "NMEN000001"){
vHtml += "<div class=\"col\">";
vHtml += " <button class=\"bs-l btn- active\" data-value=\""+data.webMenuId1+"\"><i class=\"icon-desktop-code\"></i><span>"+data.webMenuNm1+"</span></button>";
vHtml += "</div>";
}
if(data.level == 0 && data.webMenuId1 == "NMEN000002"){
vHtml += "<div class=\"col\">";
vHtml += " <button class=\"bs-l btn-\" data-value=\""+data.webMenuId1+"\"><i class=\"icon-presentation-poll\"></i><span>"+data.webMenuNm1+"</span></button>";
vHtml += "</div>";
}
if(data.level == 0 && data.webMenuId1 == "NMEN000003"){
vHtml += "<div class=\"col\">";
vHtml += " <button class=\"bs-l btn-\" data-value=\""+data.webMenuId1+"\"><i class=\"icon-inbox\"></i><span>"+data.webMenuNm1+"</span></button>";
vHtml += "</div>";
}
});
_thisVar.body.find(".tab-design-2-1.mb-24px.mb-md-16px>>").remove();
_thisVar.body.find(".tab-design-2-1.mb-24px.mb-md-16px>").html(vHtml);
//대메뉴클릭
_thisVar.body.find(".tab-design-2-1.mb-24px.mb-md-16px>>> button").click(function(){
$(this).parent().siblings().find("button.active").removeClass("active");
$(this).addClass("active");
var webMenuId1 = $(this).data().value;
var vNotWebMenuId1 = "NMEN000001,NMEN000003";
var vNotMenuNm2 = "해양공간종합지도,빅데이터분석,OpenAPI";
var vWid = 129;
if(webMenuId1 == "NMEN000003") vWid = 80;
vHtml = "";
vHtml += "<div class=\"col-3 col-md flex-b-md-"+vWid+"px\">";
vHtml += " <button class=\"btn-blue bs-m px-0 w-100 cate\"><span>전체</span></button>";
vHtml += "</div>";
$.each(_thisVarMain.selectMenuInfo, function(idx, data){
if(data.level == 1 && data.webMenuId1 == webMenuId1){
if(vNotWebMenuId1.indexOf(webMenuId1) > -1 && vNotMenuNm2.indexOf(data.webMenuNm2) > -1) return;
vHtml += "<div class=\"col-3 col-md flex-b-md-"+vWid+"px\">";
vHtml += " <button class=\"btn-blue-outline bs-m px-0 w-100 cate\" data-value=\""+data.webMenuId2+"\"><span>"+data.webMenuNm2+"</span></button>";
vHtml += "</div>";
}
});
_thisVar.body.find(".col-3.col-md.flex-b-md-129px").remove();
_thisVar.body.find(".col-3.col-md.flex-b-md-80px").remove();
_thisVar.body.find(".col.d-none.d-md-flex").before(vHtml);
//중메뉴클릭
_thisVar.body.find(".col-3.col-md.flex-b-md-"+vWid+"px").click(function(){
//$(this).siblings().find("button.btn-blue").removeClass("btn-blue");
//$(this).siblings().find("button.btn-navy").removeClass("btn-navy");
$(this).siblings().find("button.cate").removeClass("btn-blue");
$(this).siblings().find("button.cate").addClass("btn-blue-outline");
$(this).find("button").removeClass("btn-blue-outline");
$(this).find("button").addClass("btn-blue");
//$(this).find("button").addClass("btn-navy");
/*if($(this).find("button").text() == "전체"){
$(this).find("button").addClass("btn-blue");
}else{
$(this).find("button").addClass("btn-navy");
}*/
_thisVar.fnSearch(1);
});
_thisVar.fnSearch(1);
});
_thisVar.body.find(".tab-design-2-1.mb-24px.mb-md-16px>>> button.active").trigger("click");
///////////////////////////////////////////////////////
//메뉴세팅끝//////////////////////////////////////////////
///////////////////////////////////////////////////////
};
//세팅
_thisVar.setList = function(resData){
var vHtml = "";
///////////////////////////////////////////////////////
//리스트세팅//////////////////////////////////////////////
///////////////////////////////////////////////////////
/*
<!--
<span class="bs-vxs btn-navy-subtitle round-32px">자원개발</span>
<span class="bs-vxs btn-indigo-subtitle round-32px">에너지개발</span>
<span class="bs-vxs btn-purple-subtitle round-32px">해양관광</span>
<span class="bs-vxs btn-red-subtitle round-32px">환경·생태</span>
<span class="bs-vxs btn-orange-subtitle round-32px">안전관리</span>
<span class="bs-vxs btn-green-subtitle round-32px">연구·교육</span>
<span class="bs-vxs btn-cyan-subtitle round-32px">군사활동</span>
<span class="bs-vxs btn-charcoal-subtitle round-32px">항만·항행</span>
-->
<!--
<span class="bs-vxs btn-blue-subtitle round-32px">어업자원</span>
<span class="bs-vxs btn-navy-subtitle round-32px">어촌양식</span>
<span class="bs-vxs btn-indigo-subtitle round-32px">해양산업</span>
<span class="bs-vxs btn-purple-subtitle round-32px">해양환경</span>
<span class="bs-vxs btn-red-subtitle round-32px">해사안전</span>
<span class="bs-vxs btn-orange-subtitle round-32px">해운물류</span>
<span class="bs-vxs btn-green-subtitle round-32px">항만운영</span>
<span class="bs-vxs btn-cyan-subtitle round-32px">항만건설</span>
<span class="bs-vxs btn-charcoal-subtitle round-32px">공통행정</span>
-->
<!--
<span class="bs-vxs btn-cyan-outline round-32px" >기초DB</span>
<span class="bs-vxs btn-blue-outline round-32px" >해양수산분류</span>
<span class="bs-vxs btn-purple-outline round-32px" >정부기능분류</span>
<span class="bs-vxs btn-green-outline round-32px" >내부공개가능</span>
<span class="bs-vxs btn-orange-outline round-32px" >정책협의</span>
<span class="bs-vxs btn-black-outline round-32px" >XML+지도</span>
-->
*/
///////////////////////////////////////////////////////
//카드보기///////////////////////////////////////////////
///////////////////////////////////////////////////////
vHtml = "";
$.each(resData.resultList, function(idx, data){
var textWid = 80;
vHtml += "<div class=\"col-6 col-md-4\">";
vHtml += " <div class=\"box\" data-value=\""+encodeURIComponent(JSON.stringify(data))+"\">";
/* vHtml +="<div>X</div>" */
vHtml +="<div class=\"top\" style='float: right;'>"
vHtml +='<i class="icon-times fs-18px delClick" data-value=\''+encodeURIComponent(JSON.stringify(data))+'\'></i>'
vHtml +="</div>"
vHtml += " <div class=\"top\">";
if(_thisVarMain.isNull(data.nm115)) data.nm115 = "";
var vNm115 = data.nm115.trim().replace(/ /g, '');
var webMenuId1 = _thisVar.body.find(".tab-design-2-1.mb-24px.mb-md-16px>>> button.active").data().value;
if(webMenuId1 == "NMEN000002") vNm115 = data.nm315.trim().replace(/ /g, '');
var vClass = "info bg-blue-10per text-blue-500 round-32px";
if(vNm115 == "어업자원") vClass = "bs-vxs btn-blue-subtitle round-32px";
if(vNm115 == "어촌양식") vClass = "bs-vxs btn-navy-subtitle round-32px";
if(vNm115 == "해양산업") vClass = "bs-vxs btn-indigo-subtitle round-32px";
if(vNm115 == "해양환경") vClass = "bs-vxs btn-purple-subtitle round-32px";
if(vNm115 == "해사안전") vClass = "bs-vxs btn-red-subtitle round-32px";
if(vNm115 == "해운물류") vClass = "bs-vxs btn-orange-subtitle round-32px";
if(vNm115 == "항만운영") vClass = "bs-vxs btn-green-subtitle round-32px";
if(vNm115 == "항만건설") vClass = "bs-vxs btn-cyan-subtitle round-32px";
if(vNm115 == "공통행정") vClass = "bs-vxs btn-charcoal-subtitle round-32px";
if(vNm115 == "어업활동보호") vClass = "bs-vxs btn-blue-subtitle round-32px";
if(vNm115 == "해양관광") vClass = "bs-vxs btn-navy-subtitle round-32px";
if(vNm115 == "연구·교육보전") vClass = "bs-vxs btn-indigo-subtitle round-32px";
if(vNm115 == "골재·광물자원개발") vClass = "bs-vxs btn-purple-subtitle round-32px";
if(vNm115 == "환경·생태계관리") vClass = "bs-vxs btn-red-subtitle round-32px";
if(vNm115 == "군사활동") vClass = "bs-vxs btn-orange-subtitle round-32px";
if(vNm115 == "에너지개발") vClass = "bs-vxs btn-green-subtitle round-32px";
if(vNm115 == "안전관리") vClass = "bs-vxs btn-cyan-subtitle round-32px";
if(vNm115 == "항만·항행") vClass = "bs-vxs btn-charcoal-subtitle round-32px";
if(vNm115 == "")vNm115="법정조사";
//vHtml += " <span class=\""+vClass+"\">"+data.nm115+" > "+data.nm215+" > "+data.nm315+"</span>";
vHtml += " <span class=\""+vClass+"\">"+vNm115+"</span>";
if(!_thisVarMain.isNull(data.nm124)){
var vNm124 = data.nm124.trim().replace(/ /g, '');
vClass = "info border-green-500 border text-green-500 round-32px";
if(vNm124 == "기초DB") vClass = "bs-vxs btn-cyan-outline round-32px";
if(vNm124 == "해양수산분류") vClass = "bs-vxs btn-blue-outline round-32px";
if(vNm124 == "정부기능분류") vClass = "bs-vxs btn-purple-outline round-32px";
if(vNm124 == "내부공개가능") vClass = "bs-vxs btn-green-outline round-32px";
if(vNm124 == "정책협의") vClass = "bs-vxs btn-orange-outline round-32px";
if(vNm124 == "XML+지도") vClass = "bs-vxs btn-black-outline round-32px";
textWid=data.nm124.length*10;
vHtml += " <span class=\""+vClass+"\" style=\"border-width:0.8px;\" id=\"del\">"+(_thisVarMain.isNull(data.nm124)?"":data.nm124);
//vHtml += " <i class=\"icon-times fs-18px\"></i>";
vHtml += " </span>";
}
vHtml += " </div>";
vHtml += " <div class=\"title\" style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\">"+(_thisVarMain.isNull(data.bsisDtaNm)?"":data.bsisDtaNm)+"</div>";
vHtml += " <span class=\"info-txt\" style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;\">"+(_thisVarMain.isNull(data.metaNm)?"":data.metaNm)+"</span>";
vHtml += " <span class=\"info-txt\">"+(_thisVarMain.isNull(data.factorCn12)?"":data.factorCn12)+"</span>";
vHtml += " <div class=\"info\">";
vHtml += " <div class=\"row\">";
vHtml += " <div class=\"col-12\">";
vHtml += " <p class=\"txt1\"><i class=\"icon-document-list\"></i><em>출처</em><span>"+(_thisVarMain.isNull(data.nm113)?"":data.nm113)+(_thisVarMain.isNull(data.factorCn118)?"":"("+data.factorCn118+")")+"</span></p>";
vHtml += " </div>";
vHtml += " <div class=\"col-12\">";
vHtml += " <p class=\"txt1\"><i class=\"icon-calendar-check\"></i><em>수정일자</em><span>"+(data.createdDt.replace(/-/g, '.'))+"</span></p>";
vHtml += " </div>";
vHtml += " </div>";
vHtml += " </div>";
vHtml += " </div>";
vHtml += " <div class=\"bg\"></div>";
vHtml += "</div>";
});
_thisVar.body.find(".card-list-1>>").remove();
_thisVar.body.find(".card-list-1>").html(vHtml);
///////////////////////////////////////////////////////
//리스트보기//////////////////////////////////////////////
///////////////////////////////////////////////////////
vHtml = "";
$.each(resData.resultList, function(idx, data){
vHtml += "<div class=\"col-12\">";
vHtml += " <div class=\"box\" data-value=\""+encodeURIComponent(JSON.stringify(data))+"\">";
vHtml +="<div class=\"title\" style='float: right;'>"
vHtml +='<i class="icon-times fs-18px delClick" data-value=\''+encodeURIComponent(JSON.stringify(data))+'\'></i>'
vHtml +="</div>"
//vHtml += " <div class=\"title\"><em>"+(_thisVarMain.isNull(data.bsisDtaNm)?"":data.bsisDtaNm)+"</em>";
vHtml += " <div class=\"title\"><em style=\"overflow:hidden; text-overflow: ellipsis; white-space:nowrap;\">"+(_thisVarMain.isNull(data.bsisDtaNm)?"":data.bsisDtaNm)+"</em>";
var vNm115 = data.nm115.trim().replace(/ /g, '');
//var vClass = "info bg-blue-10per text-blue-500 round-32px";
var vClass = "bs-vxs btn-blue-subtitle round-32px";
if(vNm115 == "어업자원") vClass = "bs-vxs btn-blue-subtitle round-32px";
if(vNm115 == "어촌양식") vClass = "bs-vxs btn-navy-subtitle round-32px";
if(vNm115 == "해양산업") vClass = "bs-vxs btn-indigo-subtitle round-32px";
if(vNm115 == "해양환경") vClass = "bs-vxs btn-purple-subtitle round-32px";
if(vNm115 == "해사안전") vClass = "bs-vxs btn-red-subtitle round-32px";
if(vNm115 == "해운물류") vClass = "bs-vxs btn-orange-subtitle round-32px";
if(vNm115 == "항만운영") vClass = "bs-vxs btn-green-subtitle round-32px";
if(vNm115 == "항만건설") vClass = "bs-vxs btn-cyan-subtitle round-32px";
if(vNm115 == "공통행정") vClass = "bs-vxs btn-charcoal-subtitle round-32px";
if(vNm115 == "어업활동보호") vClass = "bs-vxs btn-blue-subtitle round-32px";
if(vNm115 == "해양관광") vClass = "bs-vxs btn-navy-subtitle round-32px";
if(vNm115 == "연구·교육보전") vClass = "bs-vxs btn-indigo-subtitle round-32px";
if(vNm115 == "골재·광물자원개발") vClass = "bs-vxs btn-purple-subtitle round-32px";
if(vNm115 == "환경·생태계관리") vClass = "bs-vxs btn-red-subtitle round-32px";
if(vNm115 == "군사활동") vClass = "bs-vxs btn-orange-subtitle round-32px";
if(vNm115 == "에너지개발") vClass = "bs-vxs btn-green-subtitle round-32px";
if(vNm115 == "안전관리") vClass = "bs-vxs btn-cyan-subtitle round-32px";
if(vNm115 == "항만·항행") vClass = "bs-vxs btn-charcoal-subtitle round-32px";
if(vNm115 == "")vNm115="법정조사";
textWid=vNm115.length*10;
vHtml += " <span class=\""+vClass+" ml-16px\" style=\"border-width:0.8px; min-width: "+textWid+"px; text-align: center;\">"+vNm115+"</span> ";
if(!_thisVarMain.isNull(data.nm124)){
textWid=data.nm124.length*8;
vHtml += " <span class=\"info border-green-500 border text-green-500 round-32px \" style=\"border-width:0.8px; min-width: "+textWid+"px; text-align: center;\">"+(_thisVarMain.isNull(data.nm124)?"":data.nm124);
//vHtml += " <i class=\"icon-times fs-18px\"></i>";
vHtml += " </span>";
}
vHtml += " </div>";
vHtml += " <span class=\"info-txt\">"+(_thisVarMain.isNull(data.metaNm)?"":data.metaNm)+"</span>";
vHtml += " <span class=\"info-txt\">"+(_thisVarMain.isNull(data.factorCn12)?"":data.factorCn12)+"</span>";
vHtml += " <div class=\"info\">";
vHtml += " <div class=\"row\">";
vHtml += " <div class=\"col flex-grow-0 white-space-nowrap\">";
vHtml += " <p class=\"txt1\"><i class=\"icon-document-list\"></i><em>출처</em><span>"+(_thisVarMain.isNull(data.nm113)?"":data.nm113)+(_thisVarMain.isNull(data.factorCn118)?"":"("+data.factorCn118+")")+"</span></p>";
vHtml += " </div>";
vHtml += " <div class=\"col flex-grow-0 white-space-nowrap\">";
vHtml += " <p class=\"txt1\"><i class=\"icon-calendar-check\"></i><em>수정일자</em><span>"+(data.createdDt.replace(/-/g, '.'))+"</span></p>";
vHtml += " </div>";
vHtml += " </div>";
vHtml += " </div>";
vHtml += " </div>";
vHtml += " <div class=\"bg\"></div>";
vHtml += "</div>";
});
_thisVar.body.find(".card-list-2>>").remove();
_thisVar.body.find(".card-list-2>").html(vHtml);
if(resData.resultList.length == 0){
_thisVar.body.find(".card-list-1").css("display", "none");
_thisVar.body.find(".card-list-2").css("display", "none");
_thisVar.body.find(".paging-box.pb-md-32px").css("display", "none");
_thisVar.body.find(".py-72px.text-center").css("display", "block");
}else{
_thisVar.body.find(".card-list-1").css("display", "block");
_thisVar.body.find(".card-list-2").css("display", "block");
_thisVar.body.find(".paging-box.pb-md-32px").css("display", "block");
_thisVar.body.find(".py-72px.text-center").css("display", "none");
}
//상세보기
//_thisVar.body.find(".box[data-value]").click(function(){
$(".delClick").click(function(){
var data = JSON.parse(decodeURIComponent($(this).data().value));
if(!confirm("삭제 하시겠습니까?")) return;
_thisVar.fnDeleteStUserBkmkRlt = function(){
alert("관심데이터 삭제가 완료되었습니다.");
_thisVar.fnSearch(1);
return false;
};
var async = false;
var url = "/cmm/userLog/deleteStUserBkmk.do";
var sndData = {};
sndData.pWebMenuId = data.webMenuId;
sndData.histDe = data.histDe;
sndData.metaSn = data.metaSn;
sndData.bsisDtaSn = data.bsisDtaSn;
sndData.isSpatial = "Y";
var bfFn = null;
var afFn = _thisVar.fnDeleteStUserBkmkRlt;
_thisVarMain.sendAjax(async, url, sndData, bfFn, afFn);
return false;
});
_thisVar.body.find(".box>").click(function(){
var vNm = $(this).text().trim().replace(/ /g, '');
//var data = JSON.parse(decodeURIComponent($(this).data().value));
var data = JSON.parse(decodeURIComponent($(this).parent().data().value));
console.log(vNm.length);
if(vNm.length==0 ){
return false;
}
/* if(vNm.indexOf("외부공개가능") > -1) {
return false;
console.log(data);
if(!confirm("삭제 하시겠습니까?")) return;
_thisVar.fnDeleteStUserBkmkRlt = function(){
alert("관심데이터 삭제가 완료되었습니다.");
_thisVar.fnSearch(1);
};
var async = false;
var url = "/cmm/userLog/deleteStUserBkmk.do";
var sndData = {};
sndData.pWebMenuId = data.webMenuId;
sndData.histDe = data.histDe;
sndData.metaSn = data.metaSn;
sndData.bsisDtaSn = data.bsisDtaSn;
sndData.isSpatial = "Y";
var bfFn = null;
var afFn = _thisVar.fnDeleteStUserBkmkRlt;
_thisVarMain.sendAjax(async, url, sndData, bfFn, afFn);
}else{
*/
_thisVar.body.find("#metaSn").val(data.metaSn);
_thisVar.body.find("#histDe").val(data.histDe);
if(_thisVarMain.isNull(data.code315))
{//원자료
_thisVar.body.find("#metaAtrbCode").val('OB01');
}else{
_thisVar.body.find("#metaAtrbCode").val(data.code315);
}
$.each(_thisVarMain.selectMenuInfo, function(idx, NMWNdata){
if(NMWNdata.url == data.url && !_thisVarMain.isNull(NMWNdata.webMenuId1))
{
//console.log(NMWNdata);
_thisVar.body.find("#rootMenuId").val(NMWNdata.webMenuId1);
_thisVar.body.find("#pWebMenuId").val(NMWNdata.webMenuId1);
}
if(NMWNdata.url == data.url && !_thisVarMain.isNull(NMWNdata.webMenuId2))
{
//console.log(NMWNdata);
_thisVar.body.find("#rootMenuId").val(NMWNdata.webMenuId1);
_thisVar.body.find("#pWebMenuId").val(NMWNdata.webMenuId2);
}
if(NMWNdata.url == data.url && !_thisVarMain.isNull(NMWNdata.webMenuId3))
{
//console.log(NMWNdata);
_thisVar.body.find("#rootMenuId").val(NMWNdata.webMenuId1);
_thisVar.body.find("#pWebMenuId").val(NMWNdata.webMenuId3);
}
});
var vUrl = data.url.replace("index", "detail");
//console.log(_thisVar.body.find("#pWebMenuId").val());
//console.log(_thisVar.body.find("#rootMenuId").val());
//return;
$.ajax({
type : "post",
url : "/user/meta/insertMetaView.do",
async : false,
data: {metaSn: data.metaSn, histDe: data.histDe, pWebMenuId: _thisVar.body.find("#pWebMenuId").val()},
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
error : function(request,status,error){
alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
},
success : function(data){
fnFormSubmit("<c:url value='"+vUrl+"'/>", 'bkmkForm');
}
});
//}
});
///////////////////////////////////////////////////////
//리스트세팅끝////////////////////////////////////////////
///////////////////////////////////////////////////////
///////////////////////////////////////////////////////
//페이징시작//////////////////////////////////////////////
///////////////////////////////////////////////////////
var firstPageNoOnPageList = resData.paginationInfo.firstPageNoOnPageList;
var lastPageNoOnPageList = resData.paginationInfo.lastPageNoOnPageList;
var currentPageNo = resData.paginationInfo.currentPageNo;
var totalPageCount = resData.paginationInfo.totalPageCount;
vHtml = "";
vHtml += "<li>";
if(currentPageNo > 1){
vHtml += " <a href=\"javascript:void(0);\" onclick=\"javascript:_thisVar.fnSearch(1); return false;\" title=\"처음\" class=\"first icon-angle-first\">";
vHtml += " <i class=\"\"></i>";
vHtml += " </a>";
vHtml += " <a href=\"javascript:void(0);\" onclick=\"javascript:_thisVar.fnSearch("+(currentPageNo-1)+"); return false;\" title=\"이전\" class=\"prev icon-angle-left\"></a>";
}
vHtml += "</li>";
vHtml += "<li>";
for(var i=firstPageNoOnPageList; i<=lastPageNoOnPageList; i++){
var vClass = "";
if(currentPageNo == i){
vClass = "active";
}
vHtml += " <a href=\"javascript:void(0);\" onclick=\"javascript:_thisVar.fnSearch("+i+"); return false;\" class=\""+vClass+"\">"+i+"</a>";
}
vHtml += "</li>";
vHtml += "<li>";
if(currentPageNo != totalPageCount){
vHtml += " <a href=\"javascript:void(0);\" onclick=\"javascript:_thisVar.fnSearch("+(currentPageNo+1)+"); return false;\" title=\"다음\" class=\"next icon-angle-right\"></a>";
vHtml += " <a href=\"javascript:void(0);\" onclick=\"javascript:_thisVar.fnSearch("+totalPageCount+"); return false;\" title=\"마지막\" class=\"last icon-angle-last\"></a>";
}
vHtml += "</li>";
_thisVar.body.find(".paging-box.pb-md-32px>").html(vHtml);
///////////////////////////////////////////////////////
//페이징끝///////////////////////////////////////////////
///////////////////////////////////////////////////////
};
//조회
_thisVar.fnSearch = function(num){
_thisVarMain.scrTop();
var webMenuId1 = ""; //대메뉴
var webMenuId2 = ""; //중메뉴
var metaFactorCode = "1.5";
//_thisVar.body.find(".tab-design-2-1.mb-24px.mb-md-16px").find("button.active").data().value
try{
webMenuId1 = _thisVar.body.find(".tab-design-2-1.mb-24px.mb-md-16px>>> button.active").data().value;
}catch(e){
webMenuId1 = ""; //대메뉴
}
try{
webMenuId2 = _thisVar.body.find(".col-3.col-md.flex-b-md-129px button.btn-blue").data().value;
}catch(e){
if(webMenuId1=="NMEN000003") webMenuId2 = _thisVar.body.find(".col-3.col-md.flex-b-md-80px button.btn-blue").data().value;
}
if(webMenuId1 == "NMEN000001"){
metaFactorCode = "1.51";
}else if(webMenuId1 == "NMEN000002"){
metaFactorCode = "1.52";
}
var async = false;
var url = "/mypage/ajax/mypageBkmkList.do";
var data = {};
data.pageIndex = num;
data.pageUnit = _thisVar.body.find("select[id=pageUnit]").val();
data.pageSize = "10";
data.searchKeyword = _thisVar.body.find("#searchKeyword").val();
data.webMenuId1 = _thisVarMain.isNull(webMenuId1)?"":webMenuId1;
data.webMenuId2 = _thisVarMain.isNull(webMenuId2)?"":webMenuId2;
data.metaFactorCode = metaFactorCode;
var bfFn = null;
var afFn = _thisVar.setList;
_thisVarMain.sendAjax(async, url, data, bfFn, afFn);
};
//검색
_thisVar.body.find(".icon-search").click(function(){
_thisVar.fnSearch(1);
});
//내용입력후 엔터키
_thisVar.body.on('keyup', function(e){
if(e.keyCode == 13){
if($("input:focus").attr("id") =="searchKeyword"){
_thisVar.fnSearch(1);
}
}
});
///////////////////////////////////////////////////////
//시작//////////////////////////////////////////////////
///////////////////////////////////////////////////////
cusTumSlect(); //셀렉트박스 리플레쉬
_thisVar.setMenuInfo(); //메뉴세팅
});
</script>