[jstree] JSTREE 사용법 / 예제 / API / 모음

- jsTree 

http://www.jstree.com 에서 다운로드

• jstree를 이용한 가장 간단한 트리 만들기 

- HTML을 이용하여 jsTree 만들기

html 

---

<div id="html1">

  <ul>

    <li>Root node 1

      <ul>

        <li>Child node 1</li>

        <li><a href="#">Child node 2</a></li>

      </ul>

    </li>

    <li>Root node 2

    </li>

  </ul>

</div>

javascript

---

$('#html1').jstree()

- jsTree 최상위 node인지 확인하기

$("#treeDiv").bind(

"select_node.jstree", function(evt, data){

      var dataType = data.node.parent;

         if( dataType == "#"){

// 최상위 노드 클릭

        }else{

// 하위 노드 클릭

             }

       }

).jstree();

- jsTree 하위 노드 열기

$("#treeDiv").bind(

"select_node.jstree", function(evt, data){

      var dataType = data.node.parent;

         if( dataType == "#"){

// 최상위 노드 클릭

$("#treeDiv").jstree("open_node", "#" + data.selected[0]);

        }else{

// 하위 노드 클릭

             }

       }

).jstree();