메뉴 건너뛰기

2021.03.26 14:03

DTREE 트리구조 만들기

조회 수 851 추천 수 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를 잘 참조하길 바란다.


  1. No Image 26Mar
    by
    2021/03/26 Views 1437 

    opener 값전달, 함수실행.(자식창에서 부모창으로 값전달, 함수실행)

  2. No Image 26Mar
    by
    2021/03/26 Views 197 

    getYear(); 크롬, 파이어폭스 에서 제대로 작동 안하는 문제

  3. 26Mar
    by 조쉬
    2021/03/26 Views 851 

    DTREE 트리구조 만들기

  4. No Image 26Mar
    by
    2021/03/26 Views 190 

    페이지 이동

  5. No Image 26Mar
    by
    2021/03/26 Views 199 

    default 매개변수(매개변수 기본값)

  6. No Image 25Mar
    by
    2021/03/25 Views 319 

    자바스크립트에서 이벤트 중단 하는 방법

  7. No Image 25Mar
    by
    2021/03/25 Views 218 

    현재 날짜, 시간 ( Month + 1 에 대해서 )

  8. No Image 25Mar
    by
    2021/03/25 Views 237 

    오브젝트 속성

  9. jqgrid 이용한 그리드 활용하기

  10. HTML, Javscript - 선택한 색상으로 배경색 바꾸기(pallet 만들기)

  11. No Image 09Mar
    by
    2021/03/09 Views 301 

    Javascript - 입력받은 숫자를 순서대로 홀짝 별로 배열에 삽입하기

  12. Javascript - Free SVG 한국맵 제어 처리

  13. No Image 09Mar
    by
    2021/03/09 Views 266 

    Javascript - form태그 내부 ajax처리시 2번 전송되는 현상

  14. javascript - vanillaJS로 체크박스(checkbox) 제어하기

  15. No Image 09Mar
    by
    2021/03/09 Views 718 

    Javascript - 유효성 체크(이메일 정규식, IP 정규식, 비밀번호 등)

  16. Javascript - 사업자 등록번호 유효성 체크

  17. No Image 09Mar
    by
    2021/03/09 Views 511 

    Javascript - Calendar 달력 생성하고 제어하기

  18. No Image 09Mar
    by
    2021/03/09 Views 219 

    Javascript - 입력한 년, 월의 마지막 날짜 구하기

  19. Javascript - 화면 캡처 후 서버에 저장하기(html2canvas 사용법, 주의사항)

  20. Javascript - 이미지 미리보기 회전되어 나옴(EXIF)

Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved