[jsTree] Spring + jstree 트리예제

1. 개요

• 스프링웹 환경에서 jquery tree plugin (jstree) 사용법을 포스팅한다.
• jquery.js (v3.6.0) / jstree.js (v3.3.2) / proton테마 를 사용했다.
• css다운로드는 jstree proton theme로 검색하면 많이 나온다.
• https://www.jstree.com/

jstree

jstree example

 

 

2. 백엔드처리

• 트리를 사용한 메뉴관리 프로그램을 설명한다.
• 범위가 많으니 핵심만 요약해서 설명한다.

//SQL영역-요약
//최상위 값을 #으로 표현
SELECT m.menu_cd
     , m.menu_nm
     , m.program_file_nm
     , CASE WHEN m.menu_cd = '0' THEN '#'
            ELSE m.upper_menu_cd
            END AS upper_menu_cd
     , m.menu_lvl
  FROM menu_info m
 
 
//pom.xml
//net.sf.json.JSONArray 사용
<dependency>
    <groupId>net.sf.json-lib</groupId>
    <artifactId>json-lib</artifactId>
    <version>2.4</version>
    <classifier>jdk15</classifier>
</dependency>
    
    
//spring영역
//아래처럼 treeList를 프론트에 전달
//id, text, key, parent, type 변수그대로사용
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

.....

JSONArray treeList = new JSONArray();
List<MenuVO> menuList = menuDao.selectMenuList();
				
if(menuList.size() > 0) {
    for(int i = 0; i < menuList.size(); i++){
        JSONObject firstObj = new JSONObject();
        firstObj.put("id", menuList.get(i).getMenuCd());
        firstObj.put("text", menuList.get(i).getMenuNm());
        firstObj.put("key", menuList.get(i).getProgramFileNm());
        firstObj.put("parent", menuList.get(i).getUpperMenuCd());
        firstObj.put("type", "fas fa-folder"); //css icon 폴더아이콘
		        	
        treeList.add(firstObj);
    }
}

 

 

3. 테이블구성

• 데이터베이스구조는 대략 아래와 같다.
• 최상위 값을 제대로 넣지 않으면 트리가 화면에 표현되지 않는다.
• 위에 SQL을 보면 CASE 문에서 menu_cd가 0이면 #을 표현하라하였다.
• jstree는 최상위 값이 #이어야한다. 그런데 보통 데이터베이스들은 # insert가 되지 않는경우가 있다.
• 본인 DB는 postgresql 인데 #을 저장할수 없어서 SQL에서 0이면 #으로 변환하였다.

jstree database desc

 

4. Json구성

• json 데이터
• 아래와 같이 구성되어 있다.

jstree json

 

5. 프론트엔드

• CSS : proton테마사용
• jstree : jstree.js (v3.3.12)
• jquery : jquery.js (v3.6.0)

<div id="menuTree"></div>

var menu_json = null;

$.ajax({
    type		: "POST",
    ...
    beforeSend : function(xhr){
        $('#menuTree').jstree("destroy").empty();
    },
    success: function(data){
        menu_json = data.treeList;
        fnCreateJSTrees();
    },
});

//d ata.treeList의경우
// 컨롤러에서 아래처럼 map에 담에보냈다.
// Map<String, Object> map = new HashMap<String, Object>();
// map.put("treeList", treeList);

function fnCreateJSTrees(){
		
    $('#menuTree').jstree({
         "core": {
         "animation" : 0,
         "check_callback": true,
         "data": menu_json,
         "themes": {
              "name": "proton",
               "responsive": true,
               "dots": true,
               "icons": true
              }
          },
          "sort" : function(a, b) {
               return a - b;
           },
           "contextmenu":{ 
               "items": function($node) {
                    var tree = $("#menuTree").jstree(true);
		            return {
                    };
                }
            },
            "plugins": ["search", "types", "sort"],
        }).bind("loaded.jstree", function (event, data) {
            $(this).jstree("open_all");
        }).bind("select_node.jstree", function (e, data) {
            if (typeof data.event == 'undefined') {
            }else if (data.event.type != 'contextmenu') {
                //트리선택시 key값은아래
                var key = data.node.id;                
            } 
        });
    }

 

 

6. 완성