Fancytree를 이용하여 트리를 검색조건으로 나열하기
고객의 요구로 만들어야 하는 화면은 다음과 같았다
트리1 트리2 트리3 트리4
위와 같이 트리들이 옆으로 쭈욱 나열되고 해당 트리들을 검색조건을 활용하는 방식이었다.
이를 구현하기 위해 jquery 플러그인을 확인하여 보니 fancytree가 존재하여 이를 이용하여 트리를 구현하였다.
URL : http://wwwendt.de/tech/fancytree/demo/
GIT HUB : https://github.com/mar10/fancytree/
JQUERY 버전 : 1.7+
JQUERY UI : 1.9+
라이선스 : MIT라이센스 인듯
URL 들어가면 데모가 자세히 있으며 소스도 제공하고 있다.
이를 참조하면 쉽게 트리를 만들 수 있다.
트리를 검색용으로 사용하기 위한 구현
1. 조건으로 사용할 트리 5개를 생성한다.
2. float를 이용하여 트리들을 옆으로 세운다.
3. 기본 테두리를 없앤다.
테두리 없애는 옵션이 없는 듯 하여 jquery.fancytree.js 의 소스를 수정함
ul.fancytree-container 항목의
border: 1px dotted gray => border: 0px dotted gray
4. filter text에 keyup 이벤트를 구현한다.
5. 선택한 값들을 조회해오는 FUNCTION을 구현한다.
테스트환경 : 크롬, IE11, IE11호환성모드
주의사항 :
FILTER 처리 시 제외되는 항목의 SPAN에 DISPLAY:NONE 을 처리하게 된고 항목의 내용이 사라지고 영역도 사라지게 된다.
하지만 IE11 호환성모드 에서는 내용만 사라지고 영역은 차지하게 된다.
그래서 해당 SPAN의 부모노드인 LI를 찾아 SHOW, HIDE 처리해주는 코드를 추가하였다.
결론은 FANCYTREE는 트리 만들기에는 참 잘 만들어진 JQUERY PLUGIN 이다.
fancytree_test.zip
