[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 사용예

<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>