feat : 개별총정보 네비게이트 기능 추가

pull/14/head
Kurt92 4 weeks ago
parent 0dfb93ce8f
commit c1b3eb00d6

@ -77,6 +77,7 @@
*/
(function(window, $) {
'use strict';
let TOTAL_INFO_POPUP = null;
var SEARCH_COND = {};
@ -295,17 +296,33 @@
// 행 더블클릭 이벤트 - 게시물 상세 페이지로 이동
this.instance.on('dblclick', (ev) => {
var popUrl = '${pageContext.request.contextPath}/total/info.do';
var popTitle = "";
var popTitle = "totalInfoPopup";
var popOption = "width=1400px, height=900px, resizable=yes, scrollbars=yes, location=no, top=100px, left=100px";
// 1) localStorage에 저장
let cursor = this.instance.getValue(ev.rowKey, 'mmCode');
let mmCodes = this.instance.getData().map(row => row.mmCode);
const state = { cursor, mmCodes, savedAt: Date.now() };
localStorage.setItem('TOTAL_INFO_STATE', JSON.stringify(state));
// 2) 팝업이 없거나 닫혀 있으면 새로 열기
if (!TOTAL_INFO_POPUP || TOTAL_INFO_POPUP.closed) {
TOTAL_INFO_POPUP = window.open(popUrl, popTitle, popOption);
} else {
// 이미 떠 있으면 새로 안 만들고, 그 창에 포커스만 줌
TOTAL_INFO_POPUP.focus();
TOTAL_INFO_POPUP.TOTAL_INFO_POPUP_API.search();
// 필요하면 URL도 다시 세팅해서 강제 새로고침
// totalInfoPopup.location.href = popUrl;
}
// 팝업 띄우기
let cursor = this.instance.getValue(ev.rowKey, 'mmCode'); // 선택한 mmCode
let mmCodes = this.instance.getData().map(row => row.mmCode); // 리스트업 된 자료 mmCode 리스트
const $openPop = window.open(popUrl, popTitle, popOption);
$($openPop).prop('cursor', cursor);
$($openPop).prop('mmCodes', mmCodes);
// const $openPop = window.open(popUrl, popTitle, popOption);
// $($openPop).prop('cursor', cursor);
// $($openPop).prop('mmCodes', mmCodes);
});

@ -39,10 +39,10 @@
<div class="page-indicator"><span id="pageNow">2</span> of <span id="pageTotal">4</span></div>
<div class="nav-group">
<button type="button" class="nav-btn" data-act="first" id="first">◀◀</button>
<button type="button" class="nav-btn" data-act="prev">◀</button>
<button type="button" class="nav-btn" data-act="next">▶</button>
<button type="button" class="nav-btn" data-act="last">▶▶</button>
<button type="button" class="nav-btn" name="navigate" data-act="first" id="first">◀◀</button>
<button type="button" class="nav-btn" name="navigate" data-act="prev">◀</button>
<button type="button" class="nav-btn" name="navigate" data-act="next">▶</button>
<button type="button" class="nav-btn" name="navigate" data-act="last">▶▶</button>
</div>
</div>
@ -184,6 +184,10 @@
<img id="photoPreview" src="${pageContext.request.contextPath}/static/img/sample-1.jpg" alt="미리보기">
</div>
</div>
<div>
<button type="button" class="btn btn-light" id="btnPrev">위반정보수정</button>
</div>
</div>
<div class="statusbar">
@ -216,21 +220,20 @@
<%--<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>--%>
<script type="text/javascript">
const fnBiz = {
init: () => {
// fnBiz.search();
},
// 조회결과 바인딩 샘플
//해당 객체는 팝업으로 인한 브라우저 전역선언이다.
//일반적으로 함수를 선언할땐 그냥 fnBiz로 선언하면 된다.
//window 전역을 그냥 복사하면 덮어씌워져서 난리남.
//sample.jsp 형태로 하면됨
window.TOTAL_INFO_POPUP_API = {
search: () => {
console.log("search!!!!")
console.log("Total Info Search!!!!")
const { cursor, mmCodes } = JSON.parse(localStorage.getItem("TOTAL_INFO_STATE"));
let mmCode = $("#cursor").val();
console.log('mmcode check', mmCode)
$.ajax({
// PathVariable 형태로 url를 동적으로 쓰는방식이다.
// 해당 방식 이외에 그냥 쿼리스트링으로 넘기는 방법도 있다.
url: "/total/info/" + mmCode + "/info.ajax",
url: "/total/info/" + cursor + "/info.ajax",
type: "GET",
dataType: 'json',
success: function(response) {
@ -280,35 +283,72 @@
$("#result").text("조회 실패");
}
});
}
},
}
let fnBiz = {
init: () => {
// fnBiz.search();
},
eventListener: () => {
$("button[name=navigate]").on("click", (e) => {
let flag = $(e.currentTarget).data("act");
let { cursor, mmCodes } = JSON.parse(localStorage.getItem("TOTAL_INFO_STATE"));
if (!cursor || !mmCodes) return;
const idx = mmCodes.indexOf(cursor);
let nextCursor = cursor;
switch (flag) {
case "first":
nextCursor = mmCodes[0];
break;
case "prev":
nextCursor = mmCodes[Math.max(0, idx - 1)];
break;
case "next":
nextCursor = mmCodes[Math.min(mmCodes.length - 1, idx + 1)];
break;
case "last":
nextCursor = mmCodes[mmCodes.length - 1];
break;
}
// 스토리지 업데이트
localStorage.setItem("TOTAL_INFO_STATE", JSON.stringify({ cursor: nextCursor, mmCodes: mmCodes }))
//커서로 조회
TOTAL_INFO_POPUP_API.search();
});
}
}
$(function () {
console.log("init")
$("#tabs").tabs();
TOTAL_INFO_POPUP_API.search();
fnBiz.eventListener();
//mmcode 리스트 가져오기
$("#cursor").val(window.cursor);
$("#mmCodes").val(window.mmCodes);
console.log($('#mmCodes').val());
// $("#cursor").val(window.cursor);
// $("#mmCodes").val(window.mmCodes);
// console.log($('#mmCodes').val());
// mmCodes 값이 세팅되면 search() 호출
const checkMmCode = setInterval(() => {
const cursor = $("#mmCodes").val();
const mmCodes = $("#mmCodes").val();
if (cursor && mmCodes) {
clearInterval(checkMmCode);
fnBiz.search(); // 값이 들어온 시점에 호출
}
}, 100);
// const checkMmCode = setInterval(() => {
// const cursor = $("#mmCodes").val();
// const mmCodes = $("#mmCodes").val();
// if (cursor && mmCodes) {
// clearInterval(checkMmCode);
// fnBiz.search(); // 값이 들어온 시점에 호출
// }
// }, 100);
});

@ -0,0 +1,16 @@
<%--
Created by IntelliJ IDEA.
User: kurt
Date: 2025. 11. 14.
Time: 오후 4:11
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
</body>
</html>
Loading…
Cancel
Save