#jQuery# Org Chart, 트리구조 시각화 플러그인!

 

< jQuery Organisation(Org) Chart >

jQuery Org Char Github

https://github.com/wesnolte/jOrgChart

jQuery Org Chart는 jQuery를 이용해 조직도와같은 트리형태의 데이터구조를 쉽게 표현할 수 있는 플러그인입니다.

Org Chart는 아래와 같은 특징을 가지고 있습니다.

1. 조직도와 같은 트리형태의 데이터구조를 쉽게 표현할 수 있습니다.

2. 이미 작성된 목록을 Drag & Drop을 통해 재 배열 할 수 있습니다.

3. 각 노드의 보기와 숨기기를 클릭을 통해 할 수 있습니다.

4. 스타일(CSS)를 쉽게 변경할 수 있습니다.

Org Chart 사용예

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

<li>        Food        <ul>          <li id="beer">Beer</li>          <li>Vegetables            <a href="http://wesnolte.com" target="_blank">Click me</a>            <ul>              <li>Pumpkin</li>                           </ul>          </li>          <li class="fruit">Fruit            <ul>              <li>Apple                <ul>                  <li>Granny Smith</li>                <li>                 <a href="http://tquila.com" target="_blank">Aubergine</a>                 <p>A link and paragraph is all we need.</p>              </li></ul>              </li>              <li>Berries                <ul>                  <li>Blueberry</li>                                     <li>Cucumber<ul><li><img alt="Raspberry" src="images/raspberry.jpg"></li></ul></li>                </ul>              </li>            </ul>          </li>          <li>Bread</li>          <li class="collapsed">Chocolate            <ul>              <li>Topdeck</li>              <li>Reese's Cups</li>            </ul>          </li>        </ul>      </li>