javascript 자바스크립트 트리 추천 zTree 추천 트리 플러그인 tree plugin
이번 포스팅에서는 자바스크립트 트리 플러그인인 zTree 사용법에 대해 알아보도록 하겠습니다.
자바스크립트 트리 플러그인으로 구글링을 하시면 많은 플러그인들이 검색되지만
zTree 가 가장 간편하고 많은 기능을 제공하는 것으로 판단 되었습니다.
그럼 사용법을 보도록 하죠.
우선 zTree 페이지로 이동하여 파일을 다운받습니다.
Link : http://www.treejs.cn/v3/main.php#_zTreeInfo
URL에서도 알수 있듯이 중국에서 만들어진 플러그인 입니다.
페이지 우측 하단에서 다운로드 받아주세요.
다운 받으신 후 압축을 풀면 아래와 같은 폴더구조를 보실 수 있습니다.
zTree_v3-master > js 폴더를 보시면 여러 js 파일들이 보이실 텐데요.
가장 기본이 되는 파일이 jquery.ztree.core 입니다. 가장 기본적인 트리를 만들 수 있죠.
그리고 기본 css 파일은 zTree_v3-master > css > zTreeStyle 폴더에 있는 zTreeStyle.css 파일입니다.
이 두 파일을 복사하여 프로젝트 안에 넣어주세요.
|
1
2
|
<script type="text/javascript" src="<c:url value='/resource/js/aljjabaegi/jquery.ztree.core.min.js'/>"></script>
<link rel="stylesheet" type="text/css" href="${ctx }/resource/js/aljjabaegi/css/zTreeStyle.css"/>
|
cs |
이제 트리를 사용할 준비가 되었습니다.
폴더안에 체크박스를 넣으실려면 js 폴더 내에 jquery.ztree.excheck.js 을 추가해주시면 됩니다.
수정도 가능하게 하시려면 jquery.ztree.exedit.js 도..
|
1
|
<ul id="treeDemo" class="ztree"></ul>
|
cs |
zTree 를 사용하기 위해선 위와 같이 ztree 클래스를 가진 ul이 필요합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<script>
const zNodes =[
{ 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);
});
</script>
|
cs |
데이터는 오브젝트 리스트로 구성되어 있는데요,
오브젝트 내를 설명을 드리면
id 가 해당 노드의 id
Pid는 부모로 설정할 노드의 id
name은 표출할 명 입니다.
pId를 설정하게 되면 해당 id를 찾아 하위 노드로 들어가게 됩니다.
그럼 위 코드의 실행결과를 보도록 하죠.
위처럼 간단히 트리가 완성 되었습니다.
그 외에
isParent - 이게 부모이냐, true일 경우 폴더로 표시, false일 경우 파일 아이콘으로 표시
nocheck - 체크박스가 있을 경우 true이면 비활성화, fasle 활성화
open - 하위폴더가 보이게 열어놓을 것이냐 말 것이냐
등의 옵션이 존재합니다.
다양한 옵션은 zTree 홈페이지의 Document를 참고하세요.
저의 경우에는 FTP 폴더를 관리할 수 있는 페이지를 구성할 떄 사용하였는데요,
꽤 빠른 시간에 유용하게 사용했던 것 같습니다.
간단하면서도 다이나믹한 트리, zTree 사용해보세요~
댓글