git에서 소스를 받으면 sts를 열고 아래와 같이 import 시킨다
import가 완료되면 라이브러리가 다운로드 된다
라이브러리가 전부 다운받아지고 준비가 되면 위 스프링부트 실행한다
https://localhost/443
| jackson EgovMap 예제 (0) | 2024.03.13 |
|---|---|
| ajax 동작시 404 error 뜬다면 (0) | 2024.02.16 |
| MobaXterm FileZilla war파일 개발서버 넣는법 (0) | 2024.02.07 |
| MAVEN 설치 및 CMD install 방법 (0) | 2024.02.07 |
| git에 있는 코드나 파일 강제로 받는방법 (0) | 2024.02.06 |
레코드를 전부 가져와서 jsp에서 분류 사용하는 방법
DB 쿼리를 만들어서
EgovMap egovMap = new EgovMap();
List<EgovMap> selectMenuInfo = (List<EgovMap>) myPageLogService.selectMenuInfo(egovMap);
model.addAttribute("selectMenuInfo", new ObjectMapper().writer().writeValueAsString(selectMenuInfo));
모델로 jsp로 보내면
var selectMenuInfo;
$(function () {
try {
selectMenuInfo = ${selectMenuInfo};
} catch (e) {
selectMenuInfo = null;
}
});위처럼 선언을 해서 넣어주고
$.each(selectMenuInfo, function(idx, NMWNdata){
//console.log(NMWNdata);
if(NMWNdata.webMenuId == "${selectDrBrdDetail.webMenuId1}"){
vUrl=NMWNdata.url;
}
});위처럼 찾아갈수 있다 (로그 주석을 제거하고 확인해보면 대충 알거임)
| spring boot에서 git의 코드 가져오기 (0) | 2024.04.23 |
|---|---|
| ajax 동작시 404 error 뜬다면 (0) | 2024.02.16 |
| MobaXterm FileZilla war파일 개발서버 넣는법 (0) | 2024.02.07 |
| MAVEN 설치 및 CMD install 방법 (0) | 2024.02.07 |
| git에 있는 코드나 파일 강제로 받는방법 (0) | 2024.02.06 |
컨트롤러에 콘솔도 안뜬다면
숫자에다 문자를 넣고 있거나 숫자에 날짜를 넣는건지 확인해야함
| spring boot에서 git의 코드 가져오기 (0) | 2024.04.23 |
|---|---|
| jackson EgovMap 예제 (0) | 2024.03.13 |
| MobaXterm FileZilla war파일 개발서버 넣는법 (0) | 2024.02.07 |
| MAVEN 설치 및 CMD install 방법 (0) | 2024.02.07 |
| git에 있는 코드나 파일 강제로 받는방법 (0) | 2024.02.06 |
위처럼 서버를 끄고
파일질라 클라이언트를 실행해서 war파일을 넣고
MobaXterm 에서 sh 파일을 실행
위는 개인적인 내용 기록용이니 참고
| jackson EgovMap 예제 (0) | 2024.03.13 |
|---|---|
| ajax 동작시 404 error 뜬다면 (0) | 2024.02.16 |
| MAVEN 설치 및 CMD install 방법 (0) | 2024.02.07 |
| git에 있는 코드나 파일 강제로 받는방법 (0) | 2024.02.06 |
| javascript 구분짓는 html 코딩 (0) | 2024.02.06 |
메이븐을 다운받아 C에 설치
위 설치가 끝나면 아래(참고 예시) mvn 설치 커맨드를 입력
mvn install:install-file -Dfile=C:\git\ofbd\libs\cubrid-jdbc-10.1.3.7765.jar -DgroupId=cubrid -DartifactId=cubrid-jdbc -Dversion=10.1.3.7765 -Dpackaging=jar -DgeneratePom=true
mvn install:install-file -Dfile=C:\git\ofbd\libs\gt-xsd-core-22.2.jar -DgroupId=org.geotools -DartifactId=gt-xsd-core -Dversion=22.2 -Dpackaging=jar -DgeneratePom=true
mvn install:install-file -Dfile=C:\git\ofbd\libs\gt-xsd-filter-22.2.jar -DgroupId=org.geotools -DartifactId=gt-xsd-filter -Dversion=22.2 -Dpackaging=jar -DgeneratePom=true
mvn install:install-file -Dfile=C:\git\ofbd\libs\gt-xsd-gml2-22.2.jar -DgroupId=org.geotools -DartifactId=gt-xsd-gml2 -Dversion=22.2 -Dpackaging=jar -DgeneratePom=true
mvn install:install-file -Dfile=C:\git\ofbd\libs\gt-xsd-gml3-22.2.jar -DgroupId=org.geotools -DartifactId=gt-xsd-gml3 -Dversion=22.2 -Dpackaging=jar -DgeneratePom=true
mvn install:install-file -Dfile=C:\git\ofbd\libs\gt-xsd-sld-22.2.jar -DgroupId=org.geotools -DartifactId=gt-xsd-sld -Dversion=22.2 -Dpackaging=jar -DgeneratePom=true-Dfile 경로를 해당 jar 파일이 있는곳으로 수정
그후 복사해서 CMD창에 붙여넣고 실행하면 설치 진행
만약 fail이 뜨면 이클립스를 종료하고 C:\Users\USER\.m2 폴더 안에 해당 폴더를 삭제하고 설치
이클립스에서 maven install 진행하면 콘솔에 BUILD SUCCESS 뜨면 target 폴더가 생성되면서 war파일도 생성됨
이때 error가 뜨면 콘솔을 보고 .m2 폴더 안에 관련되는 폴더 삭제하고 eclipse를 시작하면 다시 설치하게되며 maven install 하면 된다
| ajax 동작시 404 error 뜬다면 (0) | 2024.02.16 |
|---|---|
| MobaXterm FileZilla war파일 개발서버 넣는법 (0) | 2024.02.07 |
| git에 있는 코드나 파일 강제로 받는방법 (0) | 2024.02.06 |
| javascript 구분짓는 html 코딩 (0) | 2024.02.06 |
| javascript html select option 대분류 중분류 소분류 콤보 작동 코드 (0) | 2024.01.12 |
폴더 우선 삭제해야 비어있는 부분을 채워준다
받아짐 성공
| MobaXterm FileZilla war파일 개발서버 넣는법 (0) | 2024.02.07 |
|---|---|
| MAVEN 설치 및 CMD install 방법 (0) | 2024.02.07 |
| javascript 구분짓는 html 코딩 (0) | 2024.02.06 |
| javascript html select option 대분류 중분류 소분류 콤보 작동 코드 (0) | 2024.01.12 |
| postgreSQL 문자컬럼 숫자 증가시키기 (1) | 2024.01.04 |
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>| MAVEN 설치 및 CMD install 방법 (0) | 2024.02.07 |
|---|---|
| git에 있는 코드나 파일 강제로 받는방법 (0) | 2024.02.06 |
| javascript html select option 대분류 중분류 소분류 콤보 작동 코드 (0) | 2024.01.12 |
| postgreSQL 문자컬럼 숫자 증가시키기 (1) | 2024.01.04 |
| html select태그 대분류 변경시 소분류 리스트 변경 (0) | 2023.12.28 |
2023.12.28 - [업무관련/스프링] - html select태그 대분류 변경시 소분류 리스트 변경
html select태그 대분류 변경시 소분류 리스트 변경
대분류에 따라 소분류의 리스트가 변경되는 코드 샘플 1 2 3 4 5 6 7 8 9 10 11 12 13 14 선택 aaa bbb ccc > 선택 ggg ttt yyy uuu Colored by Color Scripter cs html 코드 class에 sel뒤 숫자를 가지고 구분해서 띄운다 $(func
raimbow10.tistory.com
위 기능에서 좀 더 고도화 했다
화면 제작시 위와 같은 분류에 따라 표시하는 정보가 계속 바뀔경우 보통 ajax를 사용해서 그때그때 DB에서
가져오는걸 많이 사용할것이다.
내가 만든건 BD에서 한꺼번에 가져오면 다시 DB 연결 필요 없게 제작하였다
<select id="depth0" style="width: 150px;">
<option value="0" selected="selected">선택</option>
<c:forEach var="result" items="${selectDrBrdComboCodeList1}" varStatus="status">
<option value="${result.metaAtrbNm1}" data-connectcode="${result.metaAtrbCode}"><c:out value="${result.metaAtrbNm1}"/></option>
</c:forEach>
</select>
>
<select id="depth1" style="width: 150px;">
<option value="0">선택</option>
<c:forEach var="result" items="${selectDrBrdComboCodeList2}" varStatus="status">
<option value="${result.metaAtrbNm1}" data-connectcode="${result.metaAtrbCode}" class="${result.upperMetaAtrbCode}"><c:out value="${result.metaAtrbNm1}"/></option>
</c:forEach>
</select>
>
<select id="depth2" style="width: 150px;">
<option value="0">선택</option>
<c:forEach var="result" items="${selectDrBrdComboCodeList3}" varStatus="status">
<option value="${result.metaAtrbNm1}" data-connectcode="${result.metaAtrbCode}" class="${result.upperMetaAtrbCode}"><c:out value="${result.metaAtrbNm1}"/></option>
</c:forEach>
</select>html 작성 형식은 위와 같다
DB에서 데이터를 분류별로 전부 가져와서 각각 넣어야되며 select id는 이름+0부터 연속숫자 필수로 넣어야함
data-connectcode : 자신의 코드명
class : 상위 코드와 연결될 코드
javascript로 데이터를 가져와서 출력해줄경우 위와 같은 규칙으로 만들면된다
$(function () {
// 무조건 영어만 숫자 넣으면 안됨
// 이름 뒤에 숫자를 붙여서 사용되기 때문에 숫자를 넣으면 안됨
var depthName = "depth";
// 분류의 크기
var deptTot = 3;
// 연결할 코드가 들어있는 이름
var optionDataCode = /*data-*/"connectcode";
// 초기표시값 선택사항
//var depthLoad = ["${selectAnswerDrBrdDetail[0].cnfmReturnSe}","${selectAnswerDrBrdDetail[0].srClSe}","${selectAnswerDrBrdDetail[0].srClSe}"];
var depthLoad = ["어업자원","어선정책","수산/어업통신"];
var arrDepthName;
var comboMapSet = new Map();
function setSelectDepth(optionDataCode,depthName,depthLoad,totDepth){
arrDepthName=new Array(totDepth);
for(var i=0;i<totDepth;i++){
arrDepthName[i]="#"+depthName+i;
console.log(arrDepthName[i]);
}
function updateSelected(e) {
var testString = e.target.id; // 원래 문자열
var regex = /[^0-9]/g; // 숫자가 아닌 문자열을 매칭하는 정규식
var result = testString.replace(regex, ""); // 원래 문자열에서 숫자가 아닌 모든 문자열을 빈 문자로 변경
for(var i=Number(result)+1;i<arrDepthName.length;i++){
$(arrDepthName[i]).val(0);
$(arrDepthName[i]).find("option[value!=0]").detach();
$(arrDepthName[i]).append(comboMapSet.get(arrDepthName[i]).filter("."+$(arrDepthName[i-1]).find("option:selected").data(optionDataCode)));
}
}
for(var i=1;i<arrDepthName.length;i++){
comboMapSet.set(arrDepthName[i], $(arrDepthName[i]).find("option[value!=0]"));
comboMapSet.get(arrDepthName[i]).detach();
}
for(var i=0;i<arrDepthName.length-1;i++){
$(arrDepthName[i]).change(updateSelected);
$(arrDepthName[i]).trigger("change");
}
// 대분류 값이 있으면 select에 적용
if(depthLoad[0]!="")
$(arrDepthName[0]+' option[value="'+depthLoad[0]+'"]').prop("selected", true);
for(var i=1;i<arrDepthName.length;i++){
// 하위값이 바뀌면 중분류 리스트 변경
$(arrDepthName[i]).val(0);
$(arrDepthName[i]).find("option[value!=0]").detach();
$(arrDepthName[i]).append(comboMapSet.get(arrDepthName[i]).filter("."+$(arrDepthName[i-1]).find("option:selected").data(optionDataCode)));
// 하위 값이있으면 select에 적용
if(depthLoad[i]!="")
$(arrDepthName[i]+' option[value="'+depthLoad[i]+'"]').prop("selected", true);
}
}
// 분류 설정 시작
setSelectDepth(optionDataCode,depthName,depthLoad,deptTot);
// 콤보박스 비활성화 유무
if("${selectDrBrdDetail.metaSn}"!="")
{
$("select[name=depth0]").attr("disabled", true);
$("select[name=depth1]").attr("disabled", true);
$("select[name=depth2]").attr("disabled", true);
}
}자세한 사항은 주석을 참고
depthLoad : 처음 띄워져야 할 경우 사용 (선택사항), 주로 게시물 수정에 사용됨
분류를 2개만 필요하면 deptTot = 2로 지정하고 html 관련 태그도 지우면됨
또는 추가적으로 늘릴수 있지만 10이상은 테스트해본적 없음
콘솔창을 띄어봤을때 위처럼 규칙 참고
| git에 있는 코드나 파일 강제로 받는방법 (0) | 2024.02.06 |
|---|---|
| javascript 구분짓는 html 코딩 (0) | 2024.02.06 |
| postgreSQL 문자컬럼 숫자 증가시키기 (1) | 2024.01.04 |
| html select태그 대분류 변경시 소분류 리스트 변경 (0) | 2023.12.28 |
| SameSite None 으로 변경하는방법 (0) | 2023.07.19 |