[jsTree] #3. jsTree 플러그인을 사용해보자!

jsTree 플러그인을 사용해보자!

 

인스턴스를 생성해 봅시다.

아래는 개요에 소개된 인스턴스에서 아무런 변화가 없는 기본 예제 값임.

$('#jstree').jstree();

 

구성을 수정해 봅시다.

대부분 이 기본 예제에서 기본 설정을 수정하고자 할것입니다.

아래는 구성 요소를 수정한 예.

$.jstree.defaults.core.themes.variant = "large";
$('#jstree').jstree();

=> 기본 아이콘을 크게 만들어라.

 

플러그인을 적용해 봅시다.

아래 예와 같이, plugins라는 객체는 플러그인 이름을 string array로 받아 jstree 인스턴스에 활성화 시킵니다.

$('#jstree').jstree({
  "plugins" : [ "wholerow", "checkbox" ]
});

소스 적용 결과 화면

core 옵션에 대해 알아봅시다.

plugin에 의존하지 않는 모든 옵션은 core라는 구성 객체에 포함되어있다.

각 옵션들은 이름과 키로 구성된다.

$('#jstree').jstree({
  "core" : {
    "themes" : {
      "variant" : "large"
    }
  },
  "checkbox" : {
    "keep_selected_style" : false
  },
  "plugins" : [ "wholerow", "checkbox" ]
});

=> 위에서 한줄로 썼던 $.jstree.defaults.core.themes.variant = "large"; 내용을 위와 같이 표현

 

다양한 옵션을 참고해봅시다.

https://www.jstree.com/api/#/?q=$.jstree.defaults

jstree

위 리스트는 각 인스턴스를 어떻게 구성할 수 있는지 알려줍니다.

예를 들어, 중복 선택이 가능하게끔 하고 싶다면

$.jstree.defaults.core.multiple 를 이용합니다.

$("#jstree").jstree({
  "core" : {
    "multiple" : false,
    "animation" : 0
  }
});

 

위 내용이 적용된 예제 파일

index.html

0.00MB

이전 글

2020/03/09 - [What can I do/ETC] - [jsTree] #2. jsTree 기본 설정 및 기본 예제

에 압축된 파일의 index.html을 위 파일로 수정하면 정상 작동 됩니다.

 

* 공식 사이트 : https://www.jstree.com/docs/config/