jsTree

JSTree 사용하기  - 2018/02/08 - 

jsTree를 이용하여 예제 소스 만들어보기 

jsTree란 ? 

대화형 트리를 제공하는 jquery 플러그인이다.

무료로 사용할수 있는 오픈소스이고 MIT 라이센스에 따라 배포된다.

여러가지 기능을 제공하는데 

AJAX, JSON 데이터 소스 , DRAG AND DROP, TREE CHECKBOX 등의 기능을 제공한다.

사용법 

1. https://www.jstree.com/ - 사이트에 들어가서 jsTree를 다운로드 하거나 CDN을 import 한다.

* import 할 때 유의해야할 점 : style.css, jquery.js, jstree.js 이 세가지 파일이 모두 임포트가 되어야 한다.

2.  원하는 div를 만들고 

<div id="html1">
        <ul>
            <li >Electronics
                <ul>
                    <li>Mobile
                        <ul>
                            <li>Samsung</li>
                            <li >Apple</li>
                        </ul>
                    </li>
                    <li>
                        <ul>
                            <li >Dell</li>
                            <li >Computer Peripherals
                                <ul>
                                    <li >Printers</li>
                                    <li >Monitor</li>
                                </ul>
                            </li>
                            <li >Keyboard</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

id를 설정 해준다.

3.  인스턴스를 생성해준다 

$(function() {
        $('#html1').jstree({
            'plugins': ["wholerow","types"],<!-- 플러그인 사용 -->
                
            'themes' : {            
                'responsive' : true
            },
            "types" : {
                "default": {
                    "icon" :"/images/OrganTree_cross/fldr.gif" 
                    <!--icon을 원하는 이미지로 만들때-->
                }
            }
        });
});

4. 

이렇게 하면 전체적인 아이콘을 변경이 가능하다 

예제를 만들어보았다.

오늘 하루종일 찾아본게 있는데 

왼쪽의 하단 폴더를 보이게 하는 + , - 버튼을 만들고 싶었다 아니 만들어야 했다 ...

원래는 

이렇게 삼각형 모양으로 출력되는데 + - 만드는 방법을 오래동안 찾았다

 방법!!! 

다운받은 오픈소스 css파일을 수정했다. 

찾아보니까 jstree는 image sprite 방식을 이용하여 비트맵 32px.png 파일을 px단위로 끊어서 이미지를 뿌리고 있었다 

(이런방식이 로딩속도를 줄인다 함) 

그래서 제공되는 css파일을 수정하여 만들었다

vakata-jstree-3.3.5-0-g0097fab  /  vakata-jstree-0097fab  /  src   /  themes   /  default

여기 폴더 안에 있는 style.css 파일을 수정하면된다. 

보니까 dist폴더에도 style.css파일이 있기는한데 나는 default를 사용하기 때문에 여기에 있는 style.css 를 수정하니까 먹었다.

f12를 이용하여 들어가면 지금 원하는 부분이 어떤 class를 이용하고 있는지 확인할 수 있는데 거기서 원하는 클래스를 수정하면 된다.

.jstree-default .jstree-open > .jstree-ocl { 
   background-image: url("/images/OrganTree_cross/minus.gif"); 
} 
.jstree-default .jstree-closed > .jstree-ocl { 
  background-image: url("/images/OrganTree_cross/plus.gif"); 
} 

.jstree-default > .jstree-no-dots .jstree-open > .jstree-ocl { 
   background-image: url("/images/OrganTree_cross/minus.gif"); 
} 
.jstree-default > .jstree-no-dots .jstree-closed > .jstree-ocl { 
  background-image: url("/images/OrganTree_cross/plus.gif"); 
}

나는 jstree-ocl 클래스이길래 저것을 고치니 됐다!!!!!

*jstree유의점추가