[해피CGI][cgimall] Easy Tree - Query와 Bootstrap 3를 활용한 멋진 트리 뷰

Easy Tree는 jQuery와 Bootstrap 3을 위한 훌륭하고 강력한 트리 뷰 플러그인입니다.
아이템/노드를 선택, 추가, 편집 또는 제거하여 사용자만의 트리 뷰 구조를 구축할 수 있습니다.

라이센스는 MIT 입니다. 

# 사용방법


1. HEAD 에 라이브러리 추가 합니다. 

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<link rel="stylesheet" href="css/easyTree.css">

<script src="src/easyTree.js"></script>

2. 아래와 같은 샘플 트리뷰를 만듭니다. 

<div class="easy-tree">

  <ul>

    <li>Example 1</li>

    <li>Example 2</li>

    <li>Example 3

      <ul>

        <li>Example 1</li>

        <li>Example 2

          <ul>

            <li>Example 1</li>

            <li>Example 2</li>

            <li>Example 3</li>

            <li>Example 4</li>

          </ul>

        </li>

        <li>Example 3</li>

        <li>Example 4</li>

      </ul>

    </li>

    <li>Example 0

      <ul>

        <li>Example 1</li>

        <li>Example 2</li>

        <li>Example 3</li>

        <li>Example 4

          <ul>

            <li>Example 1</li>

            <li>Example 2</li>

            <li>Example 3</li>

            <li>Example 4</li>

          </ul>

        </li>

      </ul>

    </li>

  </ul>

</div>

3. 플러그인을 초기화 및 호출합니다.

<script>

  (function ($) {

    function init() {

      $('.easy-tree').EasyTree({

        selectable: true,

        deletable: false,

        editable: false,

        addable: false,

        i18n: {

        ...

        }

      });

    }

    init();

  })(jQuery)

</script>

# 아쉬운점

DRAG & DROP 까지 있었다면 좋았을 것 같습니다. 
하지만 없더라도 괜찮은 기능입니다.