[jsTree] #4. jsTree HTML데이터로 구성해보자!

jsTree HTML데이터로 구성해보자!

 

부모 노드 구성

jstree는 <ul> <li>만으로 구성된 일반 unordered list도 tree로 바꿀 수 있습니다.

예를 들어 

$('#html1').jstree();. 라고 선언해 줄 

아래의 구성요소만 있다면 충분합니다.

<div id="html1">
  <ul>
    <li>Root node 1</li>
    <li>Root node 2</li>
  </ul>
</div>

결과값

 

자식 노드 구성

자식을 구성하는건 ul안에 nested되게끔 만들어 주기만 하면 됩니다.

구조적으로 입력한 텍스트는 링크로 바뀝니다. 따라서,

 

아래 예제와 같이, 링크가 있든 없든 상관하지 않습니다.

그러나 링크를 클릭해도 사용자가 새 페이지로 이동하지는 않으므로, changed.jstree 이벤트를 이용해서, 원하는 링크로 연결할 수 있습니다.

 

<div id="html1">
  <ul>
    <li>Root node 1
      <ul>
        <li>Child node 1</li>
        <li><a href="#">Child node 2</a></li>
      </ul>
    </li>
  </ul>
</div>

결과 값

 

클래스 셋팅

노드를 개별적으로 선택되어있게 하기 위해서 a 엘리먼트에 jstree-clicked 클래스를 추가해주세요.

비슷하게 각 노드를 개별적으로 펼쳐지게 하기위한 즉, 자식들이 펼쳐져 보이도록 jstree-open 클래스를 li 엘리먼트에 추가해 줄 수 도있습니다.

 

여기서, li 각 노드의 id 값을 unique하게 선언해주는 것이 좋습니다.

id를 같게 하면, backend 에서 jstree관련된 어떤 이벤트를 개발할 때도 싱크를 맞추기 쉬워 유용합니다.

 

<li class="jstree-open" id="node_1">Root
  <ul>
    <li>
      <a href="#" class="jstree-clicked">Child</a>
    </li>
  </ul>
</li>

결과 값

 

상태 셋팅

각 노드의 상태를 data-jstree 속성을 이용해서 셋팅할 수 있습니다.

 

다음의 조합을 이용할 수 있습니다 : opened, selected, disabled, icon

주소 값(무엇이든 /이 들어간 주소)을 적어 이미지와 아이콘을 보여줄 수 있습니다.

 

한 예로, 부트스트랩을 사용하고 싶다면

"icon" : "glyphicon glyphicon-leaf"

를 이용해서 풀잎 모양 아이콘을 보여줄 수 있습니다.

 

<li data-jstree='{"opened":true,"selected":true}'>Root
  <ul>
    <li data-jstree='{"disabled":true}'>Child</li>
    <li data-jstree='{"icon":"//jstree.com/tree.png"}'>
      Child</li>
    <li data-jstree='{"icon":"glyphicon glyphicon-leaf"}'>
      Child</li>
  </ul>
</li>

결과 값

 

AJAX로 로딩

AJAX를 이용해서 트리를 서버에서 리턴해 주는 HTML로 구성해줄 수 있다.

포맷은 여전히 같지만, 유일하게 다른점이 있다면 HTML 이 div 컨테이너 안에 없다는 것이다.

하지만 서버를 통해서 리턴될 것이다.

 

이 옵션을 사용하기 위해서는 $.jstree.defaults.core.data을 이용해야 한다.

 

jstree는 AJAX 요청값을 자동으로 응답값과 함께 tree형태로 구성해준다.

 

ul로 nested되어있지 않으면서 리턴받고싶은 아무  li 노드에 jstree-closed 클래스를 추가하면, 

jstree는 사용자가 이 노드를 열자마자 다른 AJAX 호출을 할것이다.

 

추가적으로, 기본적으로 제공하는 jQuery ajax 옵션을 이용한다면, data와 url 함수를 제공받을 수 있다.

함수는 현재 인스턴스의 범위에서 실행되며 어떤 노드가 로드되고 있는지 나타내는 파라미터 매개 변수가 전달되며 해당 함수의 반환 값은 각각 URL과 데이터로 사용된다.

 

$('#tree').jstree({
  'core' : {
    'data' : {
      'url' : 'ajax_nodes.html',
      'data' : function (node) {
        return { 'id' : node.id };
      }
    }
  }
});

// Example response:
<ul>
<li>Node 1</li>
<li class="jstree-closed">Node 2</li>
</ul>

 

* 공식 홈페이지 : https://www.jstree.com/docs/html/