fims-chongno/src/main/webapp/WEB-INF/jsp/base/menu/menu-main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>

<c:set var="prefixName" scope="request">메뉴</c:set>
              <!-- Page Body -->
    <div class="d-flex flex-column flex-grow-1">
        <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper dt-bootstrap5 no-footer">
        
			<div class="d-flex flex-row justify-content-evenly">
				<div style="width:49%;">
				<h5 class="mt-3">레이아웃</h5>
				<div id="menu-tree" class="main-left d-flex flex-column flex-grow-1">
					<div class="d-flex justify-content-between" style="padding-top:.5em; padding-bottom:.5em; border-top:1px solid #dfdfdf; border-bottom:1px solid #dfdfdf;">
						<span>
							<button id="menuToggler" onclick="toggleMenus();" class="btn btn-primary"></button>
						</span>
					</div>
					<div id="menuTree" style="padding-top:1em; height:50em; overflow:auto;">
					</div>
				</div>
				</div>
				<div style="width:49%;">
				<h5 class="mt-3">등록 정보</h5>
				<div class="d-flex flex-row justify-content-end p-3">
					<div>
						<button id="btnRemoveMenus" onclick="removeMenus();" class="btn btn-primary">- 제거</button>
					</div>
				</div>
				<jsp:include page="menu-info.jsp" />
				</div>
			</div>
		</div>
    </div>
              <!--/ Page Body -->
<script >
var menuBranches = treeSupport({
	selector:"#menuTree",
	trace:wctx.trace,
	plugins: ["checkbox", "contextmenu", "dnd"] ,
	core:{check_callback:true,
	      multiple:false
		 },
	checkbox:{
		whole_node:false,
		tie_selection:false
	},
	contextmenu:{items:{
		newMenu:{label:"메뉴 추가", action:function(obj){
			var current = menuControl.getCurrent(),
				parentID = current.parentID;
			menuControl.newInfo({parentID:parentID});
			$("input[name='parentID']").val(parentID);
		}},
		newChildMenu:{label:"하위메뉴 추가", action:function(obj){
			var current = menuControl.getCurrent(),
				parentID = current.id;
			menuControl.newInfo({parentID:parentID});
			$("input[name='parentID']").val(parentID);
			log("current", menuControl.getCurrent());
		}},
	}},
	onNodeSelect:function(obj) {
		var key = obj[0];
		menuControl.setCurrent(key);
	},
	onNodeMove:function(obj) {
		var parentID = obj.parent,
			menuID = obj.node.id;
		if (parentID == "#")
			parentID = null;
		menuControl.move(parentID, menuID);
	},
	onNodeReorder:function(obj) {
		var parentID = obj.parent,
			menuID = obj.node.id,
			menuIDs = menuBranches.getChildIDs(parentID);
		menuControl.reorder(menuIDs);
	},
	onNodeCheck:function(obj) {
		var checked = obj.checked,
			menuID = obj.node.id;
		menuControl.select(menuID, checked);
	}
});

function toggleMenus() {
	$("#menuToggler").text(menuBranches.toggleFolding() == "collapsed" ? "+ 펼치기" : "- 닫기");
}

var menuControl = new MenuControl();

menuControl.onDatasetChange = obj => {
	menuBranches.setData(treeHtml(menuControl.menus, {
		id:function(e){return e.id;},
		text:function(e){
			return e.name == e.url ? e.name : e.name + (e.url ? " (" + e.url + ")" : "");
		}
	}));
	$("#btnSelectURL").prop("disabled", menuControl.dataset.empty);
}

menuControl.onCurrentChange = item => {
	menuControl.setInfo(item.data);
	menuBranches.selectNode(item.data.id);
}

menuControl.onSelectionChange = selected => {
	$("#btnRemoveMenus").prop("disabled", selected.length < 1);
}

menuControl.onMenusChanged = () => loadUserMenus();

${menuFunc}

async function loadUserMenus() {
	let userMenus = await menuControl.getUserMenus();
	setUserMenus(userMenus);
}

function removeMenus() {
	dialog.alert({
		content:"선택한 메뉴 정보를 삭제하시겠습니까?",
		onOK:() => menuControl.remove()
	});
}

$(function(){
	${onload}
	$("#menuToggler").text(menuBranches._folding == "collapsed" ? "+ 펼치기" : "- 닫기");
	menuControl.setData(${menus});
	menuBranches.open();
});
//# sourceURL=menu-main.jsp
</script>