Programing/JavaScript

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

리커니 2018. 2. 2.
반응형

 

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 사용해보세요~

 

반응형

댓글

💲 추천 글