JS: jsTree 시작하기

jQuery 기반의 트리 구조 라이브러리인 jsTree를 활용하여 간단하게 계층형 트리 메뉴를 구현하는 기본 설정 방법입니다.

1. CDN 라이브러리 로드 (JS / CSS)

jsTree를 사용하기 위해 jQuery와 jsTree Script 및 CSS 파일을 불러옵니다.

<!-- JS -->
<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>

<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />

2. HTML 엘리먼트 및 jsTree 초기화

트리가 출력될 DIV 태그를 생성한 후 JSON 구조의 데이터를 전달하여 트리를 바인딩합니다.

<!-- HTML -->
<div id="tree"></div>

<!-- JavaScript -->
<script>
$('#tree').jstree({ 
  'core' : {
    'data' : [
      { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
      { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
      { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
      { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
    ]
  }
});
</script>