Easy Tree - Query와 Bootstrap 3를 활용한 멋진 트리 뷰 : happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > JAVASCRIPT > Easy Tree - Query와 Bootstrap 3를 활용한 멋진 트리 뷰 상세정보

클라우드태그

javascript

HTML

PHP

Api

CSS

2022

ASP

메일링

쇼핑몰

카운터

jquery

mysql

모듈

현재접속자 명

Easy Tree - Query와 Bootstrap 3를 활용한 멋진 트리 뷰

해피팀

네티즌

소스분류

JAVASCRIPT

다운로드 횟수

9 회

간단설명

Easy Tree는 jQuery와 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>