javascript, jquery tree구조 UI 사용하기(z-tree)

안녕하세요.

web 시스템을 개발하다보면 tree 구조의 UI를 사용할 경우가 굉장히 자주 생깁니다.

원래는 기존 시스템에 있는 라이브러리들을 활용하였는데

이번에는 처음부터 개발해야할 상황이 생겨서 포스팅하게 되었습니다.

제가 사용한 tree 구조의 UI는 zTree 입니다.

jQuery 플러그인 입니다.

zTree의 홈페이지 입니다.

http://www.treejs.cn/v3/main.php#_zTreeInfo

아마 중국 사이트 인것 같네요.

사이트에서 데모를 볼수 있는 공간이 있는데

심플하게 잘 나와 있습니다.

데모 주소 http://www.treejs.cn/v3/demo.php#_101

그리고 기본적인 활용법 예시 입니다.

스크립트 부분
   
  
  
  
  

  
 
html 부분

 

기본 활용법을 알아보았습니다.

이제 라이브러리를 다운받아보겠습니다.

홈페이지에도 메뉴가 있습니다.

 DownLoad메뉴를 선택하면 아래와같은 화면이 나옵니다.

git인거 같은데 약간의 UI가 다르네요.

저는 여기서 CSS와 JS를 다운 받았습니다.

먼저 CSS를 다운받습니다.

img와 css 모두 받았습니다.

JS 파일은 일단 전부 다운받았습니다.

다운받아 위의 그림과 같이 프로젝트에 추가하였습니다.

js 파일은 min.js 파일을 활용하였습니다.

min.js 파일은 내용을 일반적인 소스를 한줄 혹은 라인별로 쭉 작성하여 

용량을 줄이기위한 파일 형태 입니다.

제가 프로젝트에서 활용한 예시 입니다.

먼저 라이브러리를 선언합니다.

<link rel="stylesheet" type="text/css" href="<c:url value="/wcom/zTree/zTreeStyle.css"/>" />

<script type="text/javascript" src="<c:url value="/wcom/zTree/jquery.ztree.core.min.js" />"></script>

js와 css를 선언하였습니다.

저는 데이터의 양이 많기 때문에 자바단에서 json을 활용하여

데이터를 가져왔습니다.

컨트롤러에서 데이터 보내기

model.addAttribute("jsonArray", leeService.getRootTreeData(req));

impl 단에서 데이터 꾸리기

JSONObject jo = new JSONObject();

jo.put("id", node_id);

jo.put("pId", pId);

jo.put("name", name);

id는 노드의 고유한 식별자입니다.

pId는 상위 노드의 id 입니다.

name은 노드에 표시될 명칭 입니다.

이렇게 데이터를 가져와 화면단에서 뿌려주었습니다.

var zNodes =${jsonArray};
			const setting = {
			    data: {
			        simpleData: {
			            enable: true,
			        }
			    },
				view: {
					showIcon: true,
					dblClickExpand: false,
				},
				callback: {
					onClick: zTreeOnClick
				}
			}
		    $.fn.zTree.init($("#tree"), setting, zNodes);
			var treeObj = $.fn.zTree.getZTreeObj("tree");
			treeObj.expandAll(true);

간단하게 설명드리면

showIcon : 아이콘 출력 여부

dblClickExpand : 더블클릭시 노드 펼쳐지는 기능 사용 여부

등 다양한 옵션 값이 있습니다.

홈페이지의 API를 활용하면 좋을것 같습니다.

API 주소 http://www.treejs.cn/v3/api.php

저는 키 이벤트를 활용하여 키보드르 노드간 이동할수 있게 개발도 하였습니다.

결과적으로 다음과 같은 구조를 만들어 활용하였습니다.

모두 즐거운 시간 보내세요.