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