자바스크립트 트리
페이지 정보
작성자 서방님 댓글 0건 조회 121회 작성일 07-02-26 17:22본문
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 너무 사랑한거니... </TITLE>
<Style>
body,td,th,form,div,span,input,select,textarea {font-size:9pt;}
</Style>
</HEAD>
<BODY>
<div id="d"></div>
<br><br><br>
<input type="button" value="oAll" OnClick="oTree.OpenAll();">
<input type="button" value="cAll" OnClick="oTree.CloseAll();">
</BODY>
</HTML>
<Script language="JScript">
//*************************************** 트리설정 Object ******************************************//
/***************************************
작성자 : 외사랑
작성일 : 어느 외로운 봄날
특이사항 : 성능 향상을 고려... 처음 출력만 재귀호출로 출력.. 이후는 style의 display 속성으로 보였다 안보였다 하도록 구성
***************************************/
function Node(id, pid, name, linkUri, addScript, IsGroup, open){ // Node
this.id = id;
this.pid = pid;
this.name = name;
this.linkUri = (linkUri==null) ? "" : linkUri;
this.addScript = (addScript==null) ? "" : addScript;
this.IsGroup = (IsGroup==null) ? 1 : IsGroup;
this.open = (open==null) ? 1 : open;
this.childCnt = 0;
}
function CTree(oName){ // Tree Body
this.name = oName;
this.aNodes = [];
this.root = new Node(0,null,"root");
this.config = {
showElementId : "d",
indent : " "
}
this.icon = {
openGroupIcon : "<span style='color:#FF0000;'>-</span> " ,
closeGroupIcon : "<span style='color:#0000FF;'>+</span> " ,
emptyGroupIcon : "<span style='color:#AAAAAA;'>$</span> " ,
fileIcon : "<span style='color:#AAAAAA;'></span> "
}
}
CTree.prototype.Add = function (id, pid, name, linkUri, addScript, IsGroup, open){ // Add Node
this.aNodes[this.aNodes.length] = new Node(id, pid, name, linkUri, addScript, IsGroup, open);
for(var i=0;i<this.aNodes.length;i++) if(this.aNodes[i].id == pid) this.aNodes[i].childCnt++;
}
CTree.prototype.Show = function (idx, indent){
var s = "";
var flag = false;
switch (idx){
case -1 :
for(var i=0;i<this.aNodes.length;i++){
if(this.aNodes[i].pid == 0 && this.aNodes[i].IsGroup == 0){
s += "<div id='" + this.config.showElementId + this.aNodes[i].id + "'>";
s += this.icon.fileIcon;
s += "<span " + this.aNodes[i].addScript;
if(this.aNodes[i].linkUri != "") s += " OnClick="location.href='" + this.aNodes[i].linkUri + "';" style='cursor:hand;'";
s += ">";
s += this.aNodes[i].name;
s += "</span>";
s += "</div>";
}
}
for(var i=0;i<this.aNodes.length;i++){
if(this.aNodes[i].pid == 0 && this.aNodes[i].IsGroup == 1){
s += "<div id='" + this.config.showElementId + this.aNodes[i].id + "'>";
if(this.aNodes[i].childCnt > 0){
s += "<span OnClick="" + this.name + ".ViewOnOff(" + i + ");" style='cursor:hand;'>";
s += (this.aNodes[i].open == 1) ? this.icon.openGroupIcon : this.icon.closeGroupIcon;
s += "</span>";
}else{
s += this.icon.emptyGroupIcon;
}
s += "<span " + this.aNodes[i].addScript;
if(this.aNodes[i].linkUri != "") s += " OnClick="location.href='" + this.aNodes[i].linkUri + "';" style='cursor:hand;'";
s += ">";
s += this.aNodes[i].name;
s += "</span>";
s += "</div>";
s += this.Show(i, this.config.indent);
}
}
document.getElementById(this.config.showElementId).innerHTML = s;
return;
default :
if(this.aNodes[idx].childCnt > 0){
for(var i=idx;i<this.aNodes.length;i++){
if(this.aNodes[i].pid == this.aNodes[idx].id && this.aNodes[i].IsGroup == 0){
s += "<div id='" + this.config.showElementId + this.aNodes[i].id + "'>" + indent;
s += this.icon.fileIcon;
s += "<span " + this.aNodes[i].addScript;
if(this.aNodes[i].linkUri != "") s += " OnClick="location.href='" + this.aNodes[i].linkUri + "';" style='cursor:hand;'";
s += ">";
s += this.aNodes[i].name;
s += "</span>";
s += "</div>";
}
}
for(var i=idx;i<this.aNodes.length;i++){
if(this.aNodes[i].pid == this.aNodes[idx].id && this.aNodes[i].IsGroup == 1){
s += "<div id='" + this.config.showElementId + this.aNodes[i].id + "'>" + indent;
if(this.aNodes[i].childCnt > 0){
s += "<span OnClick="" + this.name + ".ViewOnOff(" + i + ");" style='cursor:hand;'>";
s += (this.aNodes[i].open == 1) ? this.icon.openGroupIcon : this.icon.closeGroupIcon;
s += "</span>";
}else{
s += this.icon.emptyGroupIcon;
}
s += "<span " + this.aNodes[i].addScript;
if(this.aNodes[i].linkUri != "") s += " OnClick="location.href='" + this.aNodes[i].linkUri + "';" style='cursor:hand;'";
s += ">";
s += this.aNodes[i].name;
s += "</span>";
s += "</div>";
s += this.Show(i, indent + this.config.indent);
}
}
}
return s;
} // switch
}
CTree.prototype.OpenAll = function(){
for(var i=0;i<this.aNodes.length;i++) this.aNodes[i].open = 1;
for(var i=0;i<this.aNodes.length;i++) if(this.aNodes[i].pid == 0 && this.aNodes[i].childCnt >0)
this.Display(i, this.aNodes[i].open);
}
CTree.prototype.CloseAll = function(){
for(var i=0;i<this.aNodes.length;i++) this.aNodes[i].open = 0;
for(var i=0;i<this.aNodes.length;i++) if(this.aNodes[i].pid == 0 && this.aNodes[i].childCnt >0)
this.Display(i, this.aNodes[i].open);
}
CTree.prototype.Open = function(id){
var pid;
var idx;
for(var i=0;i<this.aNodes.length;i++){
if(this.aNodes[i].id == id){
idx = i;
pid = this.aNodes[i].pid;
break;
}
}
switch(pid){
case 0 :
this.Display(idx,1);
break
default :
for(var i=0;i<this.aNodes.length;i++) if(this.aNodes[i].id == pid) this.aNodes[i].open = 1;
this.Open(pid);
}
return;
}
CTree.prototype.ViewOnOff = function (idx){
this.aNodes[idx].open = 1 - this.aNodes[idx].open;
if(this.aNodes[idx].childCnt > 0) this.Display(idx, this.aNodes[idx].open);
return;
}
CTree.prototype.Display = function(idx, open){
document.getElementById(this.config.showElementId + this.aNodes[idx].id).children[0].innerHTML = (open == 0) ? this.icon.closeGroupIcon : this.icon.openGroupIcon;
switch(open){
case 0 :
for(var i=idx;i<this.aNodes.length;i++){
if(this.aNodes[i].pid == this.aNodes[idx].id){
document.getElementById(this.config.showElementId + this.aNodes[i].id).style.display = "none";
if(this.aNodes[i].childCnt > 0) this.Display(i, 0);
}
}
break;
default :
for(var i=idx;i<this.aNodes.length;i++){
if(this.aNodes[i].pid == this.aNodes[idx].id){
document.getElementById(this.config.showElementId + this.aNodes[i].id).style.display = "block";
if(this.aNodes[i].childCnt > 0) this.Display(i, this.aNodes[i].open);
}
}
break;
} // switch
return;
}
//*************************************** 트리설정 Object ******************************************//
var oTree = null;
oTree = new CTree("oTree"); // object 생성
//*************************************** 트리 노드 추가 Object ******************************************//
//oTree.Add(자신의 ID, 부모의 ID, 해당링크 주소, 각종 스크립트및 스타일시트, 0 혹은 1 폴더 혹은 파일여부);
oTree.Add(1, 0, "짝", "", "OnClick="alert('사랑은 언제나 목마르다.');" style='cursor:hand;'");
oTree.Add(2, 0, "야후로링크", "http://www.yahoo.co.kr");
oTree.Add(3, 0, "눈물");
oTree.Add(4, 0, "그리움");
oTree.Add(5, 0, "날위해 울지말아요");
oTree.Add(6, 0, "우리의 약속");
oTree.Add(7, 0, "또한번 사랑은 가고");
oTree.Add(8, 0, "준비했던 이별의 말들도");
oTree.Add(11, 1, "나야 모르겠니");
oTree.Add(12, 1, "장난꾸러기 짝");
oTree.Add(13, 1, "고무줄 자르며");
oTree.Add(111, 11, "기억나니");
oTree.Add(112, 11, "내가 널 자꾸 괴롭힌다며");
oTree.Add(1111, 111, "이젠 긴머리의 날씬한", "", "style='font-weight:bold;'", 0);
oTree.Add(1112, 111, "예쁜숙녀구나", "", "style='border:1px solid #FF0000;'", 0);
oTree.Add(51, 5, "때가왔어", "", "", 0);
oTree.Add(52, 5, "하늘위로", "", "", 0);
//*************************************** 트리 노드 추가 Object ******************************************//
//*************************************** 트리의 icon 등등 설정 ******************************************//
//oTree.config["showElementId"] = "뿌려줄 div,span,td 의 id, default는 d";
//oTree.config["indent"] = "계층구조에서 좌측 공백부분, default는 ";
//oTree.icon["openGroupIcon"] = "트리가 열렸을 때 표시 아이콘, default는 <span style='color:#FF0000;'>-</span>";
//oTree.icon["closeGroupIcon"] = "트리가 닫혔을 때 표시 아이콘, default는 <span style='color:#0000FF;'>+</span>";
//oTree.icon["emptyGroupIcon"] = "하위 자식이 없는 폴더 표시 아이콘, default는 <span style='color:#AAAAAA;'>$</span>";
//oTree.icon["fileIcon"] = "자식을 갖지않는 최종 파일 표시 아이콘, default는 <span style='color:#AAAAAA;'></span>";
//*************************************** 트리의 icon 등등 설정 ******************************************//
oTree.Show(-1,""); // 트리 출력 메소드
oTree.CloseAll(); // Option으로 일단 모든 트리를 닫는다.
oTree.Open(111); // Option으로 넘어온 값이나 특별히 열려있어야 하는 id가 있을 경우... 현상태의 경우 "기억나니"를 연다.
</Script>
출처 : 태오닷넷 외사랑님
댓글목록
등록된 댓글이 없습니다.
