Dtree를 사용중이 었으나, 디자인 문제도 있고 대용량문제도 있어서 라이브러리를 변경해봤습니다.
대용량(300~400개 이상의 노드를 갖는)트리에서도 오류발생은 하지 않아서 사용하게 되었습니다.
다만, 전체적으로 이미지 사용량이 많은 편이기 때문에(이쁘긴 하지요) 느린편입니다.
그래서 기본 제공되는 Text앞의 옵션 이미지는 사용하지 않도록 설정을 해봤습니다.
조금 낳군요;;
<div id="treeboxbox_tree"
style="width:218; height:496; margin-top:5px;"
//트리 옵션을 div에 설정합니다. ㅡㅡ; xml 로딩방식을 html로 변환하여 사용하는 방법입니다.
//UL / LI 로 구성하는 것보다 편한것 같아 사용해봤습니다.
setImagePath="images/dhtmlx/csh_bluebooks/" //이미지 폴더 경로
setOnCheckHandler=treeCheckFunc //체크박스 클릭시 이벤트 함수 할당
enableCheckBoxes=1 //체크박스 사용여부 옵션
enableTreeImages=false //이미지 사용여부 옵션
enableTreeLines=true // 트리 라인이미지 사용여부
>
<xmp>
<item text="caption Text"
id="아이디 영문 숫자 조합 가능"
checked='1/0'
img1="일반이미지" img2="폴더-닫힘" img3="폴더-열림"
/>
<item text="caption Text"
id="아이디 영문 숫자 조합 가능"
checked='1/0'
img1="일반이미지" img2="폴더-닫힘" img3="폴더-열림"
>
<item text="caption Text"
id="아이디 영문 숫자 조합 가능"
checked='1/0'
img1="일반이미지" img2="폴더-닫힘" img3="폴더-열림"
/>
</item>
</xmp>
</div>
<script language="javascript">
var tree = dhtmlXTreeFromHTML('treeboxbox_tree'); //xmp를 트리로 변환
//기본 샘플들이 XML파일을 변환하는 것들로 구성되어 있으므로 필요한 경우 샘플을 참조하세요(사이트 제공)
//Array()를 이용한 트리구성을 터득하신분은 알려주시면 감사하겠습니다 ㅜㅜ (pro버전만 가능한건지;;; ㅜㅜ)
/**
* 주제도 트리 CheckBox 이벤트
* @param {Object} id
* @param {Object} state
*/
function treeCheckFunc(id, state){
alert(id + state); //이벤트 발생된 CheckBox의 ID와 checked값, 이 외에도 파라메터가 더 있을 듯 합니다;;
tree.getParentId.(itemId); //부모 노드 아이디 얻기
tree.isItemChecked(itemId); // 해당 아이템 CheckBox Checked값 얻기
tree.openItem(itemId); //해당 아이템 폴더 열기
tree.setUserData(itemId,name,value); //해당 아이템 임의 데이터 삽입
tree.getUserData(itemId,name); // 해당 아이템 임의 데이터 추출
tree.getItemText(itemId); //해당 아이템 Text 얻기
tree.getSelectedItemText(); //현재 선택 아이템 Text 얻기
tree.setCheck(itemId,state); //해당 아이템 Checked 설정
tree.deleteChildItems(itemId); //해당 아이템 및 자식 노드 삭제
// 이 외에도 메소드들과 옵션이 다양하게 지원됩니다.
// API문서에는 적혀있지 않은것들이 너무 많아서 자주 사용할만 것들만 적어 놓습니다.
// 해당파일 : dhtmlxtree.js
}
</script>
