[jsTree] jstree 시작하기 (ft. 트리구조 jstree란?)

jstree는 말 그대로 트리형식의 구조를 지원해 웹에 출력을 도와주는 라이브러리 이다.

jquery 기반으로 HTML 또는 JSON 데이터를 가지고 Tree 형식을 만들어준다.

---

---

이런 형식의 구조를 많이 봤을 것이다.  이 구조를 만들수 있게 도와주는게 jstree.js 이다.

 

공식 사이트는 다음과 같다. (당연히 영문이다.)

https://www.jstree.com/

 

이제 사이트를 기반으로 하나하나 배워보자.

---

jstree를 본격적으로 시작하기에 필요한 세팅을 해보자.

 

▷js

: jquery 와 jstree 스크립트이다.

<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

: jstree css 파일

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

 

이렇게 베이스를 깔아두고 간단하게 시작을 해보자.

글 시작할때 보여주었던 트리구조 이미지 그대로 만들것이다.

 

▷html

<div id="tree">

</div>

 

▷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" },
    ]
  }
});

 

결과는 글 맨 위에 있는 이미지와 동일하다.

이렇게 간단하게 트리구조를 만드며 jstree를 시작하였는데

이제 하나하나 다음 글부터 알아가 보도록 하자