jsTree 아이콘 변경 및 분류 (types plugin)

 

jsTree에서 폴더와 leaf 를 분리해서 보여주고 싶다면

혹은 여러 타입의 정보를 tree 구조로 보여주고 싶다면 type plugin을 사용하면된다.

 

jsTree plugin 공식문서 ↓

 

https://www.jstree.com/plugins/

jstree

 

 

types plugin으로 하위노드 개수 제한, icon 변경

$('#tree').jstree({
  'plugins' : ["types"], // plugin 목록에 추가
  'types': {
       '#': { // ROOT
        "max_depth": 5// 하위 depth 제한
       },
       'file':{ // type이 file인 경우
        "icon":"ico-file", //file 아이콘
        "max_children": 0, //leaf이므로 자식을 못갖도록 설정
        "max_depth":0
       },
       'default':{
        "icon":"ico-dir" //dir 아이콘
       }
  }
})

/* css */
.jstree-themeicon-custom.ico-file {background: 이미지경로}
.jstree-themeicon-custom.ico-dir {background: 이미지경로}

 

1. plugin 목록에 추가해준다.

2. types에 '#', 'file', 'default' 세 분류를 정의했다.

3. depth를 무한으로 만들수 없도록 루트로 부터 5depth로 제한줌

4. file의 경우 leaf로 사용할것이기 때문에 자식을 갖을수 없고 file icon을 사용하도록 한다.

 

 

DATA 예시 

[{"text":"1","parent":"#","sort_no":1,"type":"default","id":625},
 {"text":"1-1","parent":"625","sort_no":1,"type":"file","id":626},
 {"text":"1-2","parent":"625","sort_no":2,"type":"file","id":627},
 {"text":"1-3","parent":"625","sort_no":3,"type":"file","id":628}]

 

결과

 

 

 

types plugin으로 CSS Style Custom

type으로 다른 색상이나 겉보기도 커스텀 가능하다.

 

$('#tree').jstree({
  'plugins' : ["types"], // plugin 목록에 추가
  'types': {
       'wdmsfile':{
        "a_attr":{style: "background:#ffc080;"} // style로 배경 색상지정
       },
       'wdmsdir':{
        "a_attr":{style: "background:#ffb080;"} 
       },
       'arbfile':{
        "a_attr":{style: "background:#fff9c4;"}
       },
       'arbdir':{
        "a_attr":{style: "background:#fff59d;"}
       }
  }
});

 

데이터 포맷을 확인해보면 li_attr와 a_atrr 항목이 있는데

위의 코드는 grid와 함께 사용해서 a_attr를 사용했다. 

원하는 커스텀에 따라 li_attr, a_attr를 사용하면된다.

 

 

DATA 예시 

 [{"text":"1","parent":"#","sort_no":1,"type":"wdmsdir","id":625},
 {"text":"1-1","parent":"625","sort_no":1,"type":"wdmsfile","id":626},
 {"text":"A","parent":"625","sort_no":1,"type":"arbdir","id":637},
 {"text":"A-ㄱ","parent":"625","sort_no":1,"type":"arbfile","id":638},
 {"text":"1-2","parent":"625","sort_no":2,"type":"wdmsfile","id":627},
 {"text":"1-3","parent":"625","sort_no":3,"type":"wdmsfile","id":628}]

 

결과