xit-app
/
external-system-test
20
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor : 메뉴를 설정에 따라 동적으로 렌더링할 수 있도록 수정

Browse Source
main
이범준 2 years ago
parent dd88dd5abe
commit 35b7231993
1 changed files with 220 additions and 50 deletions
Show Stats Download Patch File Download Diff File

270
src/main/webapp/WEB-INF/jsp/framework/layouts/tiles/biz/header.jsp
Unescape Escape View File

@ -3,7 +3,6 @@
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<%String uri = request.getRequestURI();%>
<header>
<hgroup>
@ -58,62 +57,22 @@
</dl>
</div>
</div>
<nav>
<ul class="lnb" id="lnb">
<c:forEach items="${allMenuList}" var="dep_1" varStatus="status1">
<c:if test="${dep_1.menuDepth eq '1' }">
<li>
<span><a href="${dep_1.menuUrl}">${dep_1.menuName}</a></span> <!-- depth1 출력 -->
<c:if test="${dep_1.childCnt > 0 }"> <!-- 자식 메뉴가 있으면.. -->
<button type="button" class="toggle">하위메뉴 열기</button>
<ul class="dep2">
<c:forEach items="${allMenuList}" var="dep_2" varStatus="status2">
<c:if test="${dep_2.menuDepth eq '2' and dep_1.menuSid eq dep_2.parentSid}">
<li>
<%-- <span><a href="${dep_2.menuUrl}">${dep_2.menuName}</a></span><!-- depth2 출력 -->--%>
<span><a onclick="openMenu('${dep_2.menuSid}', '${dep_2.menuName}', '${dep_2.menuUrl}')" href="#">${dep_2.menuName}</a></span><!-- depth2 출력 -->
<c:if test="${dep_2.childCnt > 0 }"> <!-- 자식 메뉴가 있으면.. -->
<button type="button" class="toggle">하위메뉴 열기</button>
<ul class="dep3">
<c:forEach items="${allMenuList}" var="dep_3" varStatus="status3">
<c:if test="${dep_3.menuDepth eq '3' and dep_2.menuSid eq dep_3.parentSid}">
<li <c:if test="${dep_3.menuUrl eq urlInfoMap.menuUrl}"> class="sel active"</c:if>>
<%-- <span><a href="${ctx }${dep_3.menuUrl}">3 ${dep_3.menuName}</a></span><!-- depth3 출력 -->--%>
<span><a onclick="openMenu('${dep_3.menuSid}', '${dep_3.menuName}', '${dep_3.menuUrl}')" href="#">${dep_3.menuName}</a></span><!-- depth3 출력 -->
<c:if test="${dep_3.childCnt > 0 }"> <!-- 자식 메뉴가 있으면.. -->
<button type="button" class="toggle">하위메뉴 열기</button>
<ul class="dep4">
<c:forEach items="${allMenuList}" var="dep_4" varStatus="status4">
<c:if test="${dep_4.menuDepth eq '4' and dep_3.menuSid eq dep_4.parentSid}">
<li <c:if test="${dep_4.menuUrl eq urlInfoMap.menuUrl}"> class="sel active"</c:if>>
<%-- <span><a href="${ctx }${dep_4.menuUrl}">4 ${dep_4.menuName}</a></span><!-- depth4 출력 -->--%>
<span><a onclick="openMenu('${dep_4.menuSid}', '${dep_4.menuName}', '${dep_4.menuUrl}')" href="#">${dep_4.menuName}</a></span><!-- depth3 출력 -->
</li>
</c:if>
</c:forEach>
</ul>
</c:if>
</li>
</c:if>
</c:forEach>
</ul>
</c:if>
</li>
</c:if>
</c:forEach>
</ul>
</c:if>
</li>
</c:if>
</c:forEach>
</ul>
<nav id="menuNav">
</nav>
<div id="sneatMenu">
</div>
</div>
</hgroup>
</header>
<script defer type="text/javascript">
/* 사용자 수정 화면*/
function fn_goMyView() {
/* ====================
@ -153,6 +112,217 @@
}
});
popup = CmmPopup.open(popUrl, params, popOption, target);
}
/* ====================
* 2023.03.22 이범준
* 동적 메뉴 렌더링 함수
====================*/
function MenuRender() {
let _self = this;
_self.template = null;
_self.rootUlAttrDraw = null;
_self.ulAttrDraw = null;
_self.liAttrDraw = null;
_self.liContentDraw = null;
//메뉴 렌더링 설정 초기화
this.init = function(){
switch(_self.template){
case "sneat" :
_self.rootUlAttrDraw = function(element){
element.className = "menu-inner";
};
_self.ulAttrDraw = function(element, menuObj){
element.className = "menu-sub";
};
_self.liAttrDraw = function(element, menuObj){
element.className = "menu-item";
};
_self.liContentDraw = function(element, menuObj){
let a = document.createElement("a");
a.href = "javascript:void(0)";
a.classList.add("menu-link");
if(menuObj.childCnt > 0){ //하위메뉴가 있으면
a.classList.add("menu-toggle");
} else {
a.setAttribute("onclick", "openMenu('"+menuObj.menuSid+"', '"+menuObj.menuName+"', '"+menuObj.menuUrl+"')");
}
//if(){
//a.appendChiled(i) // 아이콘
//}
let div = document.createElement("div");
let text = document.createTextNode(menuObj.menuName);
div.appendChild(text);
a.appendChild(div);
element.appendChild(a);
};
break;
default :
_self.rootUlAttrDraw = function(element){
element.className = "lnb";
element.id = "lnb";
};
_self.ulAttrDraw = function(element, menuObj){
if(menuObj.menuDepth == 1){
element.className = "dep2";
} else if(menuObj.menuDepth == 2){
element.className = "dep3";
} else if(menuObj.menuDepth == 3){
element.className = "dep4";
} else {
}
};
_self.liAttrDraw = function(element, menuObj){
if(menuObj.menuUrl == "${urlInfoMap.menuUrl}" && (menuObj.menuDepth == 3 || menuObj.menuDepth == 4)){
element.classList.add("sel");
element.classList.add("active");
}
};
_self.liContentDraw = function(element, menuObj){
let span = document.createElement("span");
let a = document.createElement("a");
if(menuObj.childCnt <= 0){
a.setAttribute("onclick", "openMenu('"+menuObj.menuSid+"', '"+menuObj.menuName+"', '"+menuObj.menuUrl+"')");
}
a.href = "#"; //href추가
let text = document.createTextNode(menuObj.menuName);
a.appendChild(text);
span.appendChild(a);
element.appendChild(span);
if(menuObj.childCnt > 0){ //하위메뉴가 있으면
let button = document.createElement("button");
button.type = "button";
button.classList.add("toggle");
let text = document.createTextNode("하위메뉴 열기");
button.appendChild(text);
element.appendChild(button);
}
};
break;
}
};
//메뉴 렌더링
this.menuDraw = function(allMenuList){
let rootUl = document.createElement("ul");
_self.rootUlAttrDraw(rootUl);
for(let status1 = 0; status1 < allMenuList.length; status1++){
let dep1 = allMenuList[status1];
if(dep1.menuDepth == 1){
let li = document.createElement("li");
_self.liAttrDraw(li,dep1);
_self.liContentDraw(li,dep1);
if(Number(dep1.childCnt) > 0){
let ul = document.createElement("ul");
_self.ulAttrDraw(ul,dep1);
li.appendChild(ul);
for(let status2 = 0; status2 < allMenuList.length; status2++){
let dep2 = allMenuList[status2];
if(dep2.menuDepth == 2 && dep1.menuSid == dep2.parentSid) {
let li = document.createElement("li");
_self.liAttrDraw(li,dep2);
_self.liContentDraw(li,dep2);
if(Number(dep2.childCnt) > 0){
let ul = document.createElement("ul");
_self.ulAttrDraw(ul,dep2);
li.appendChild(ul);
for(let status3 = 0; status3 < allMenuList.length; status3++){
let dep3 = allMenuList[status3];
if(dep3.menuDepth == 3 && dep2.menuSid == dep3.parentSid) {
let li = document.createElement("li");
_self.liAttrDraw(li,dep3);
_self.liContentDraw(li,dep3);
if(Number(dep3.childCnt) > 0){
let ul = document.createElement("ul");
_self.ulAttrDraw(ul,dep3);
li.appendChild(ul);
for(let status4 = 0; status4 < allMenuList.length; status4++) {
let dep4 = allMenuList[status4];
if(dep4.menuDepth == 4 && dep3.menuSid == dep4.parentSid){
let li = document.createElement("li");
_self.liAttrDraw(li,dep4);
_self.liContentDraw(li,dep4);
ul.appendChild(li);
}
}
}
ul.appendChild(li);
}
}
}
ul.appendChild(li);
}
}
}
rootUl.append(li);
}
}
if(_self.template == "sneat"){
document.getElementById("sneatMenu").append(rootUl);
const menu1 = document.querySelector("#sneatMenu");
menu1.classList.add("menu");
menu1.classList.add("menu-vertical");
menu1.classList.add("bg-menu-theme");
menu1.classList.add("py-3");
menu1.classList.add("overflow-hidden");
if (menu1) {
new Menu(menu1);
}
} else {
document.getElementById("menuNav").append(rootUl);
}
}
}
/**************************************************************************
* initialize
**************************************************************************/
$(document).ready(function () {
//사용자별 메뉴 목록 조회
cmmAjax({
showSuccessMsg: false
,url: "<c:url value='/framework/biz/cmm/cache/getMenuListByUser.do'/>"
,data: {uniqId: '${sessionScope.XitLoginSession.uniqId}'}
,type: "get"
,success: (data) => {
let mr;
mr = new MenuRender();
mr.template = "default";
mr.init();
mr.menuDraw(data.allMenuList);
}
});
});
</script>

Write Preview
Loading…
Cancel
Save