반응형
아래 코드는 jsTree를 사용하여 트리 구조를 생성하고, 다양한 이벤트를 활용하여 트리 노드의 상태 변경 및 핸들링을 수행하고 있습니다.
jsTree를 사용하기 위해서는 css와 javascript 라이브러리를 가져옵니다.
트리구조는 <div id="jstree"> 내부에 <ul>과 <li> 태그를 사용해 각각의 id 속성을 가지고 있습니다.
$('#jstree').on('이벤트명.jstree', function (e, data) { ... }) 를 통해 이벤트마다 콘솔 로그에 정보를 출력합니다. 변경된 노드 ID, 노드가 열렸을 때, 닫혔을 때, 선택되었을 때, 선택 해제되었을 때 등의 이벤트를 콘솔에서 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
</head>
<body>
<div id="jstree">
<ul>
<li id="root">Root node
<ul>
<li class="group" id="groupA">A 그룹
<ul>
<li id="child1">Child node 1</li>
<li id="child2">Child node 2</li>
</ul>
</li>
<li class="group" id="groupB">B 그룹
<ul>
<li id="child3">Child node 3</li>
<li id="child4">Child node 4</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<button id="confirmationBtn">선택확인</button>
<script>
$(function () {
$('#jstree').jstree({
'plugins': ['checkbox']
});
$('#confirmationBtn').click(function () {
var selectedNodes = $('#jstree').jstree('get_selected', true);
var selectedNodeIds = selectedNodes.map(function (node) {
return node.id;
});
alert("선택된 항목 ID: " + selectedNodeIds.join(", "));
});
// changed.jstree 이벤트 핸들링
$('#jstree').on('changed.jstree', function (e, data) {
console.log('변경된 노드 ID:', data.selected);
});
// open_node.jstree 이벤트 핸들링
$('#jstree').on('open_node.jstree', function (e, data) {
console.log('노드가 열렸습니다:', data.node.text);
});
// close_node.jstree 이벤트 핸들링
$('#jstree').on('close_node.jstree', function (e, data) {
console.log('노드가 닫혔습니다:', data.node.text);
});
// select_node.jstree 이벤트 핸들링
$('#jstree').on('select_node.jstree', function (e, data) {
console.log('노드가 선택되었습니다:', data.node.text);
});
// deselect_node.jstree 이벤트 핸들링
$('#jstree').on('deselect_node.jstree', function (e, data) {
console.log('노드 선택이 해제되었습니다:', data.node.text);
});
});
</script>
</body>
</html>
반응형
'개발이야기 > jQuery' 카테고리의 다른 글
| [jQuery] UI Tabs 사용하기 (가로/세로 tabs, tab 추가하기) (0) | 2023.07.27 |
|---|---|
| [jQuery] 이벤트 등록/해제하기 사용법,예제($(document).on(),$(document).off()) (0) | 2023.07.19 |
| [jQuery] 화면 (브라우저) 크기 확인, 화면 변경 감지하기 (0) | 2023.07.04 |
| [jQuery] input name 배열 값 가져오기, 유효성 검사 (0) | 2023.07.03 |
| [jQuery] 이미지 레이어 팝업, 슬라이드 (Lightbox plugin) (0) | 2023.06.28 |
댓글