무한 정보 세상 헤쳐나가기

jQuery 플러그인 zTree 옵션 적용하는 방법


web 프론트 작업 중 트리 구조가 필요하게 되었습니다.

조사해보니 기능도 많고 쓸만한 jQuery 플러그인 중에 zTree가 가장 눈에 띕니다.

사용법을 정리하려 했는데 공식사이트에 잘 설명되어 있어 기초적인 적용방법은 필요없을 듯 하고 노하우 비슷한 내용을 정리해 봅니다.


**공식 사이트**

[http://www.treejs.cn/v3/main.php#_zTreeInfo](http://www.treejs.cn/v3/main.php#_zTreeInfo)

공식 사이트의 메뉴는 크게 다음과 같이 되어 있습니다.

- Home
- Demo
- API Document
- Guide
- Donate
- Download (github 링크)

## 시작하기
zTree를 일단 시작하려면 사이트 메뉴 중 Guide에 있는 "Getting Started Guide"를 보시면 금방 시작할 수 있습니다.



## 옵션 적용하기
하지만, zTree를 입맛에 맞게 사용하려면 많은 옵션들을 설정해야 하는데 처음부터 API 문서를 보게 되면 머리가 아파집니다.

저의 경우 일단 Demo 를 통해서 필요한 기능을 확인 후(데모가 잘 되어 있습니다) 필요한 기능이 있는 데모가 나타나면 해당 페이지에 File Path 를 확인합니다.

이 File Path의 의미는 gitHub의 Demo 폴더에 들어 있는 파일의 위치를 알려주는 것이므로 gitHub로 들어가 소스를 확인합니다.(처음에는 이것을 몰라 시간이 많이 걸렸습니다)

소스를 통해 옵션이 확인되면 이때 API Document를 통해 해당 옵션의 정확한 기능을 확인하여 적용하면 되겠습니다.

**zTree 공식 GitHub**

[https://github.com/zTree/zTree_v3](https://github.com/zTree/zTree_v3)