jsTree Theme(테마), 아이콘 설정

데모

http://www.orangehilldev.com/jstree-bootstrap-theme/demo/

다운로드

https://github.com/orangehill/jstree-bootstrap-theme

1. css 소스 링크

<link rel="stylesheet" href="/jstree/themes/proton/style.min.css">

위의 theme을 다운로드 하고, 위 경로의 스타일시트를 참조하면 끝!

 - 부트스트랩으로 구성된 페이지라, 부트스트랩 설정 생략.

2. jstree 설정 (JS)

$('#tree').jstree({

'plugins': ["wholerow"],

'core' : {

'data' : data

},

'themes' : {

'name' : 'proton',

'responsive' : true

}

}

});

3. 데이터

//server side 작업 시, children을 포함한 데이터에 "glyphicon glyphicon-leaf" 지정해줌

var data =  [

    {

      "id": "1",

      "parent": "#",

      "text": "TEST",

      "icon": "/jstree/themes/proton/tree_icon.png" //root 아이콘 지정

    },

    {

      "id": "2",

      "parent": "1",

      "text": "New1",

      "icon": "glyphicon glyphicon-leaf"

    },

    {

      "id": "3",

      "parent": "1",

      "text": "New2",

      "icon": "glyphicon glyphicon-leaf"

    }

  ]

4. 결과

최상위 노드 (ROOT)의 아이콘은 다운받은 theme 폴더 안에 없는 아이콘이라 jstree 데모사이트에서 떠옴

기타 사용원하는 icon은 png 형식의 이미지 파일로 지정 후 사용 가능.

 icon url : https://www.jstree.com/static/3.2.1/assets/images/tree_icon.png → 트리아이콘

▼ 적용 Tree 모습 ▼

자식이 있는 부모노드는 leaf, 최하위 노드는 기본 폴더 아이콘 적용.

▼ JSFiddle - 예제 ▼ 

http://jsfiddle.net/Jay89/8381ds5p/

view, modeling 쪽은 수월했으나..

서버쪽 다루기가 까다로운 모듈

그래도 원활히 작업 끝내서 다행.