메뉴 건너뛰기

2021.03.26 14:03

DTREE 트리구조 만들기

조회 수 414 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

open all | close all


위와같은 트리 구조를 만들고 싶다면, 사용하기 바란다.

첨부파일의
dtree.css
dtree.js
이 두가지 파일과
img폴더만 있으면 준비가 끝이다. 자세한 설명과 예제는 같이 있는 예제파일과, api.html 파일을 보면 알수 있겠지만 그래도 간단히 설명해주자면

<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"></script>

<script type="text/javascript">
d = new dTree('d'); //dtree선언
d.add(0,-1,'My example tree'); //최상위 루트, 참조가 없기때문에 -1
d.add(1,0,'Node 1','example01.html'); 
d.add(2,0,'Recycle Bin','example01.html','','','img/trash.gif');

document.write(d); //화면에 표시
</script>

식으로 사용하면 될것이다.
그리고 add()의 파라미터들을 설명하자면
mytree.add( p1, p2, p3, p4, p5, p6, p7 ) 에서
p1 : id값
p2 : 부모참조 id값. 여기에 적힌 id가 부모노드가 된다
p3 : 표시될 노드의 이름
p4 : 해당 노드를 클릭했을때 이동될 페이지 주소
p5 : 해당노드의 이름에 마우스를 가져다 대면 뜨는 설명
p6 : a태그의 target에 해당하는값. 보통 새창에서 열리게 할때 쓰임
p7 : 이미지경로및 이름. 여기에 적힌 이미지가 표시된다. 안적을경우엔 기본값으로 표시

나머지 모든트리를 표시하는 mytree.openAll();나, 모든 하위트리를 감추는 mytree.closeAll(); 같은 함수들도 있으니 api를 잘 참조하길 바란다.


List of Articles
번호 제목 날짜 조회 수
241 문자열 안에 쌍따옴표, 홑따옴표 표시하는 3가지 방법 file 2021.08.20 390
240 대소문자 변경 (대문자를 소문자로, 소문자를 대문자로) 2021.08.20 101
239 시간 계산하기 (시/분/초/ 더하기, 빼기) 2021.08.20 853
238 날짜 계산 (Date) 마지막 날짜(말일)/윤달/윤년 처리하기 2021.08.20 713
237 월의 마지막 날짜 계산하기 2021.08.20 62
236 Date 객체로 원하는 날짜, 시간 표현하기 2021.08.20 63
235 날짜 계산하기 (년/월/일 더하기, 빼기) 2021.08.20 1100
234 3자리 마다 쉼표만 찍어주는 number_format 함수 2021.03.26 79
233 팝업창 맨위로 올라오게 하기 2021.03.26 325
232 폼안에 태그명, 함수명 같을때 오류 2021.03.26 89
231 ajax 사용시 Internal Sever Error 뜨는 경우 2021.03.26 235
230 자주쓰는 것들 2021.03.26 72
229 utf-8일때 alert 한글 깨짐 해결 2021.03.26 1703
228 split, join, replace, replace_all 2021.03.26 71
227 opener 값전달, 함수실행.(자식창에서 부모창으로 값전달, 함수실행) 2021.03.26 838
226 getYear(); 크롬, 파이어폭스 에서 제대로 작동 안하는 문제 2021.03.26 51
» DTREE 트리구조 만들기 file 2021.03.26 414
224 페이지 이동 2021.03.26 57
223 default 매개변수(매개변수 기본값) 2021.03.26 55
222 자바스크립트에서 이벤트 중단 하는 방법 2021.03.25 78
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved