Spring) Jstree (VO, Service, DAO, Ctrl, Mapper, DB, Json)
Jstree의 각 node를 추가 및 수정이 가능하고 각각의 노드에 클릭이벤트를 주기 위해 정리해보았습니다.
개발 환경 (표준프레임워크 3.9 버전)
- jdk :1.8
-Spring Framework : 4.3.22.RELEASE
-aspectj : 1.9.5
-log4j : 2.11.2
-slf4j : 1.7.25
-jackson : 2.10.0
-springframework.security : 4.2.11.RELEASE
-myBatis : 3.4.6
-tomcat : 8.5.58
-mariadb : 10.5.5
1. Jstree 라이브러리
- 라이브러리 다운로드 : www.jstree.com
jstree
jsTree is jquery plugin, that provides interactive trees. It is absolutely free, open source and distributed under the MIT license. jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources and AJAX loading.
www.jstree.com
- jsTree 페이지에서 다운로드 클릭
- 압축해제 후 vakata-jstree-6dce227 > dlist > jstree.min.js 라이브러리 추가 (버전에 따라 폴더명이 바뀔 수 있습니다.)
- 라이브러리 선언
2. DB table (mariaDB)
- jstree json format 참고 페이지 : www.jstree.com/docs/json/
- parent를 사용하기 위해 아래의 JSON format을 사용하였습니다.
DB 설명
- 테이블 명 : tree_area
- 칼럼 : id, parent, text, icon
- SELECT문 : select id , ifnull(parent,'#') as parent, text, icon from tree_area;
- parent는 상위 node가 될 부모 아이디를 가져야 합니다.
- 최상위 node의 parent는 '#'으로 지정해야 합니다.
3. VO
4. CONTROLLER
Controller 설명
- url :.../device/treelist로 설정했습니다.
- @SuppressWarnings : 경고표시 안 나오게 하기(없어도 됩니다.)
- MediaType : org.springframework.http.MediaType , http를 통해 들어오는 값의 타입을 정합니다.
- APPLICATION_XML_VALUE : MediaType의 기본값 , 기본적으로 http에서 String값을 가져옵니다.
- APPLICATION_JSON_UTF8_VALUE : 자바스크립트로 던질 때 String화 된 값을 json 데이터 타입의 UTF-8 이란 것을 명시시켜 줍니다.
5. SERVICE (interface)
6. SERVICE IMPL (java implements)
7. DAO (interface)
8. DAO IMPL (java implemetns)
9. MAPPER
mapper 설명
- jstree에서 사용하기 위해 가져와야 할 필수적인 값은 id, parent, text (icon은 선택사항)입니다. 이름이 다르다면 알리아스(as) 나 DTO를 생성하는 등, 다른 방법으로 라도 id, parent, text, icon 값을 뿌려줘야 합니다.
10. VIEW PAGE
- 해당 부분에 jstree를 생성할 것입니다.
- script에서 지정할 id와 css를 적용할 class를 임의로 지정했습니다.
- Script
Script 설명
1. 트리 생성
- jsTree가 controller에서 보낸 json 데이터를 받아 <div id="ajax">에 트리를 생성합니다.
$('#ajax').jstree({
'core': {
'data': {
"url": "/device/treelist.json",
"dataType": "json"
}
}
});
2. 노드별 클릭이벤트
- $("#ajax").on$('#ajax').on("click",".jstree-anchor",function(e){ // 트리의 각 노드를 선택했을 때 실행하는 클릭 이벤트 function입니다.
변수 설명
- var text = $("#ajax").jstree(true).get_node($(this)).text; // 해당 노드의 text (이름)
- var parent = $("#ajax").jstree(true).get_node($(this)).parent; // 해당 노드의 parent (부모 ID)
- var grandparent = $("#ajax").jstree(true).get_node(parent).parent; // 해당 노드 부모의 parent (부모의 부모 ID)
- var parentText = $("#ajax").jstree(true).get_node(ts).text; (ts = $(this).parent().parent()) // 해당 노드 부모의 text (부모의 이름)
- ts = $(this).parent().parent() // $(this)는 <li>, $(this). parent()는 li를 감싸는 <ul>, $(this). parent(). parent()는 상위 노드 <li>, 최상위 노드에서는 사용할 수 없습니다.
$('#ajax').on("click",".jstree-anchor",function(e){
var ts = $(this).parent().parent();
var text = $("#ajax").jstree(true).get_node($(this)).text;
var parent = $("#ajax").jstree(true).get_node($(this)).parent;
var grandparent = $("#ajax").jstree(true).get_node(parent).parent;
var greatgrandparent = $("#ajax").jstree(true).get_node(grandparent).parent;
var Greatgrandparent = $("#ajax").jstree(true).get_node(greatgrandparent).parent;
var parentText = $("#ajax").jstree(true).get_node(ts).text;
if(parent == '#'){
alert("텍스트 : "+text+", 부모 : #, 레벨 : 1");
}else if(grandparent == "#"){
alert("텍스트 : "+text+", 부모 : "+parentText+", 레벨 : 2");
}else if(greatgrandparent == "#"){
alert("텍스트 : "+text+", 부모 : "+parentText+", 레벨 : 3");
}else if(Greatgrandparent == "#"){
alert("텍스트 : "+text+", 부모 : "+parentText+", 레벨 : 4");
}else{
alert("텍스트 : "+text+", 부모 : "+parentText+", 레벨 : 5");
}
});조건문 설명
- if(parent == '#') // parent 가 '#' >>> 상위 노드가 없는 최상위 노드 (text : 전체)
- if(grandparent == '#') // parent의 parent 가 '#' >>> 최상위 노드 바로 아래의 노드 (text : 설비 1, 설비 2, 설비 3, 서울 발전본부)
- if(greatgrandparent == '#') // parent의 parent의 parent 가 '#' >>> 최상위 노드의 두 단계 아래 노드 (text : A그룹, B그룹, C그룹, G그룹, H그룹, I그룹)
- if(Greatgrandparent == '#') // parent의 parent의 parent 의 parent 가 '#' >>> 최상위 노드의 세 단계 아래 노드
3. 초기 상태 설정
- jstree가 시작될 때 실행할 함수
- $(this).jstree("open_node",id); // 해당 id의 노드를 open 상태로 바꿉니다. (바꿀 node의 text : 전체)
$("#ajax").on("ready.jstree",function(){
$(this).jstree("open_node",1);
});
출력 화면
왼쪽 사진은 처음 시작될 때 jstree, 오른쪽 사진은 모든 노드를 열었을 때입니다.
구현 위주로 만들다 보니 코드가 불필요적이거나 비효율적일 수 있습니다...