[Javascript] zTree 로 동적 트리 구조 만들기

Tree structure

zTree

ID, PID, NAME 세 개의 JSON 구조로 간단하면서 사용방법도 쉬운 zTree

Spring Framework에서, View 단에서 쓸 만한 트리를 찾다가 “zTree”라는 것을 알았고, 간단한 사용법과 DB와 연동, 동적으로 설계가 가능하여 포스팅하게 되었다.

 

다운로드 및 적용

zTree를 사용하기 위해 CSS파일과 Javascript 파일이 필요하다. 해당하는 파일은 아래 Git 링크에서 구할 수 있다.

https://github.com/zTree/zTree_v3 (Jquery Tree Plugin이라 적혀있는데, 아마 Jquery도 필요한 모양이다. 필자는 이미 추가 되어있는 환경에서 구현했다.)

css, js 디렉토리의 모든 파일을 프로젝트에 붙여넣고, View에서 아래의 파일을 Head에 적어준다.

/* 각 환경의 Path에 맞게 수정 */
<script src="js/jquery.ztree.core.js"></script>
<script src="js/jquery.ztree.core.min.js"></script>
<link rel="css/zTreeStyle/zTreeStyle.css">

 

테스트

HTML Body에 다음 코드를,

<ul id="treeDemo" class="ztree"></ul>

Head의 Script 하위에는 다음 코드를 붙여넣고
const folderArray =[
    { id : "1", name:"최상위1" },
    { id : "11", pId : "1", name:"최상위1의 하위1"},
    { id : "12", pId : "1", name:"최상위1의 하위2"},
    { id : "2", name:"최상위2" },
    { id : "21", pId : "2", name:"최상위2의 하위1"},
    { id : "22", pId : "2", name:"최상위2의 하위2"},
];
const setting = {
    data: {
        simpleData: {
            enable: true,
        }
    }
}
 
$(document).ready(function(){
    $.fn.zTree.init($("#treeDemo"), setting, folderArray);
});

테스트를 해본다.

 

사용방법

$.fn.zTree.init() 에 의하여 초기화가 된다. 첫 번째 인자로 “treeDemo”라는 ID를 가진 ul태그에 “setting”라는 설정 값을 갖고 JSON 구조인 “folderArray”를 트리로 만든다.

설정할 수 있는 것들은 아래의 API Document에서 확인하는 것이 좋을 것 같다.

zTree API Document

 

각각의 변수명은 구현하는 사람에 따라 다르게 해도 되며, 여기서 중요한 점은 “folderArray”가 JSON구조의 데이터면 된다는 점이다.

위의 코드는 const, 즉 정적인 내용을 하드코딩하여 보여줬다면, Spring Framework 를 사용하는 환경에서는, 컨트롤러에서 DB에서 데이터를 주고받은 후 JSON형태로 변환하여 View로 넘겨준다면 언제든지 동적인 트리를 만들 수 있다는 점이다.

 

시행착오

시행착오 딱 두 가지 있었는데 다음과 같다.

  1. MyBATIS로 매핑되어 List<General>형식으로 넘어온 데이터를 어떻게 JSON으로 만드는가
  2. JSON으로 잘 넘겼는데 왜 트리가 1단으로만 구성되어 지는가

트리를 동적으로 구성하기 위해 DB의 테이블을 만들었고, ID는 Sequence로 트리를 만들 때 마다 자동으로 번호가 생성 되게했다.

Request > Controller > Find mapping method > Execute SQL and substitute value

이 과정에서, 단순 List<General>에 담기는데, JSONArray 객체를 생성하여 다음 Method를 사용하면 간단하게 JSON 형태로 만들어진다.

JSONArray jsonArray = new JSONArray();
jsonArray.fromObject(OBJECT)

이렇게 만들어지는 JSON형태의 데이터를 ModelAndView.addObject(STRING, OBJECT)형태로 넘겨, $.fn.zTree.init() 세 번째 인자에 ${STRING} 형식으로 넣으면 트리가 만들어진다.

잘 넘겨받은 데이터로 트리를 초기화하는 모습까지는 확인했으나, PID를 통한 트리의 하위 구성이 안됐다. 무슨 이유인지 모르겠지만, 위 코드에서 “pId”를 잘 보면 대/소문자가 섞여있는 것을 확인할 수 있었다.

혹시나 하는 마음에, jquery.ztree.core.js와 jquery.ztree.core.min.js를 뜯어봤다. 역시, “simpleData” 설정에 “pId”라는 것을 확인할 수 있었고, 소문자로 고치고 쿠키 지운 후 확인, 완벽하게 동적으로 트리가 동작하는 것을 볼 수 있었다.

 

참조

javascript 자바스크립트 트리 추천 zTree 추천 트리 플러그인 tree plugin


게시됨

카테고리

작성자

태그:

%d 블로거가 이것을 좋아합니다: