jstree bootstrap theme proton 사용하기 / Javascript

회사 프로젝트에서는 jstree를 사용해 트리를 보여 주는데, 펼치고 접는 아이콘을 +, -로 바꿔 달라는 요청이 있었다.


아이콘을 png로 바꿔서 해도 된다고는 하지만 제일 싫어하는 게 이미지 찾고….. 그거 집어넣고…. 하는 것이기 때문에 이것저것 구글링을 해 본 결과 proton이라는 bootstrap 기반의 테마를 찾을 수 있었다.


데모 페이지에도 나와 있는데, 다들 cdn 방식으로 사용하는 게 대부분이었다. 나도 그렇게 할 수 있었지만 회사 프로젝트의 index.html 파일이 너무 깨끗해서……. ㅋㅋㅋㅋㅋㅋㅋ 건드리지 않고 패키지로 다운받을 수 있으면 했다.

https://www.npmjs.com/package/jstree-bootstrap-theme

우리의 위대한 npm은 당연히도 패키지를 가지고 있었다. 설치하고 나면 node_modules에 이 테마 레포지토리에 올라와 있는 코드가 그대로 깔리는데, 우리는 이 중에 style.min.css를 쓰게 될 거다.

import "jstree-bootstrap-theme/dist/themes/proton/style.min.css";

나는 아이콘 크기를 살짝 줄여야 했는데, 그런 식으로 tree 내에서 css를 수정해야 한다면 저 파일을 건드리면 된다.

jsTree로 데이터를 에쁘게 출력해 주려면 약간의 데이터 가공이 필요하다. 나는 jquery를 이용하여 json 방식을 사용했는데, 이런 건 다른 곳에도 많이 나와 있으니 자세한 건 생략하겠다. 오늘의 목적은 theme 적용이다.

$("#organTree").jstree({
        plugins: ["wholerow"],
        core: {
          data: roots,
          themes: {
            name: "proton-large",
            responsive: true,
          },
          check_callback: true,
        },
 });

이게 처음에 딱 트리를 그리는 코드다. core의 data 프로퍼티가 아까 말한 가공한 데이터가 들어가는 곳이고, 우리는 themes 프로터피를 보면 되겠다. name에 proton 을 넣어 주면 끝이다. 나는 크기가 살짝 큰 걸 원해서 proton-large를 설정했는데 당연히 그냥 proton도 가능하고 proton small도 가능하다. responsive는 proton 테마가 지원해 주는 반응형 지원이다. plugins는 공식 문서에 나와 있는 것처럼 검색 기능이나 드래그 앤 드롭 등을 지원한다.


요약을 하자면 npm이나 git 레퍼지토리에서 테마 코드를 받아서 style.min.css를 import 해주고, 트리를 최초에 그릴 때 themes를 설정해 주면 된다는 뜻이다 ^.^