1. 공식문서로 가면 첫 페이지에서 download 가능
2. download 압축 파일의 압축을 해제
3. 압축 해제한 패키지 dist → jstree.js 사용
4. 압축 해제한 패키이 dist → themes→ default → style.css 사용(해당 패키지 이미지도 추가하면 사용 가능함)

jquery 기반 라이브러리로 jquery를 필수적으로 추가해야함

다운로드 파일에서 js/css 추가

<link rel="stylesheet" href="{css 추가한 경로}">
<script src="{jstree.js파일 추가한 경로}"></script>
<script src="{jquery js파일 추가한 경로}"></script>

라이브러리 추가할 영역 추가

<!--id, class 상관없이 지정 가능함-->
<!--jquery로 불러올 수만 있으면 상관없음-->
<div id="root"></div>

script코드로 그리기

1. core하위 data를 통해 정보를 배열 형태로 넘길 수 있음(라이브러리에서는 data로 지정하는데 안됨)

2. data에 사용 가능한 객체 프로퍼티(core 하위 프로퍼티)

   1. id: 구분 아이디(유니크 값을 가져야함)
   2. parent: 부모 node id를 지정하면 해당 node의 하위 노드로 작성됨
   3. text: 노드 정보 표시
   4. icon: 노드의 아이콘을 지정 가능함(경로를 작성)
   5. state: 노드 랜더링시 상태를 설정 가능
      1. opened: 노드의 하위 노드가 open 상태로 전개
      2. disabled: 노드에 이벤트를 사용할 수 없는 상태로 랜더링
      3. selected: 노드가 선택된 채로 랜더링
   6. children: 배열을 받으며, 배열은 String 또는 Object로 설정
   7. li_attr: Object를 받으며 li 태그에 대해 attribute 설정 가능
   8. a_attr: Object를 받으며 a 태그에 대해 attribute 설정 가능

3. 여러 plugins 설정(core 하위)

   

   1. dnd: drag and drop 플러그인

   2. contextmenu: 각 노드의 오른쪽 클릭시 사용가능한 메뉴 플러그인

      

      1. core와 같은 레벨에 작성하면 커스텀 contextmenu 생성 가능 → 세세한 이벤트 감지가 어려움

   3. check_callback: core의 check_callback에 함수를 추가하여 각 노드의 이벤트를 처리가능함

4. jstree 이벤트

   

   1. 해당 태그를 가져와서 이벤트 사용 가능
   2. 예제는 앞선 <div id=”tree”></div>ㄴ에 tree를 작성한 후 모든 node가 열리도록 이벤트 작성

5. multiple selected

   1. core: {multiple: false}를 통해 다중 선택 막을 수 있음