利用JavaScript實現樹型結構的TreeView類

說明：這是一個用JAVASCRPT類實現的顯示樹型結構的類。程式的0.5版（第一次編寫的不完美程式）是用JAVASCRIPT和XML DOM實現的，在IE5.5以下的版本中，必須安裝MSXML3.0組件才可以使用。
     該版本的程式採用數組代替了XML DOM，速度更快，也更穩定！
     下一步，我將使用HTML DOM 編寫ListView類，請喜歡的朋友為我提供思路
     這是我第一個寫成的自己比較滿意的作品，歡迎大家多提意見。在此，將原始碼全部公開，喜歡能為大家所使用
    
     類中的方法為：
     add(節點編號，父節點編號，節點文字)
     refresh()   根據數組中的內容更改外觀
    
     類中的屬性為：
     container  一個TD的HTML DOM節點，需要更改TREEVIEW的外觀時使用
     selectedID 當前選中的節點的編號
     data       存貯節點資訊的數組
    
     使用方法：
     一般與伺服器端的目錄結構表一起使用
     eg: var tv=new TreeView("tv");   這裡要注意，由於類中成員對象的事件中，不能識別對象本身，所以必須在類的建構函式中加入代表對象名的字串
         tv.add(0,1,"跟目錄一");       0代表在跟節點下添加節點
         tv.add(1,2,"子目錄一");      
         tv.refresh();                顯示外觀
        
    註：程式中使用了六張圖片，注意指定它們的路徑，需要的話可以在http://www.fangfa.net/treeview/下下載
===================================================*/

//預先下載圖片
var ImagePath="./";  //在這裡定義預設的圖片路徑

var img1=new Image();
img1.src=ImagePath+"close.gif";
var img2=new Image();
img2.src=ImagePath+"closeitem.gif";
var img3=new Image();
img3.src=ImagePath+"closeselect.gif";
var img4=new Image();
img4.src=ImagePath+"open.gif";
var img5=new Image();
img5.src=ImagePath+"openitem.gif";
var img6=new Image();
img6.src=ImagePath+"openselect.gif";
//**********************************************************
//*                     TreeView類                         *
//* 功能：顯示樹型結構                                      *
//* 時間：2002-9-27 17：25                                  *
//* 作者：阿福，happy_afu@sina.com                          *
//* 版本：1.0                                               *
//**********************************************************
//註：數組格式：Array(編號，父節點編號，文本，級數，選擇情況，展開情況，子節點ID列表)
function TreeView(ObjectVarName)
{
//屬性
this.OverTag=null;                                           //滑鼠移上時候的標籤
this.OverObj=null;                                           //滑鼠移上時候的對象
this.container=CreateTable();                                //建立最初的表格，返回容器物件
this.selectedID=null;                                        //得到當前選中的對象
this.data=new Array();
//方法
this.CreateRow=CreateRow;                                    //建立行
        //高層函數
this.add=add;                                                //添加節點
this.refresh=refresh;                                        //根據XML節點的值來建立TREEVIEW外觀
this.ADDNODE=ADDNODE;                                        //遞迴方法加入節點
 
this.add=add;
function add(ParentID,ID,TEXT)
{
//首先檢查數組中是否已經存在這個元素
var item;
for(item in this.data)
{
if(this.data[item][0]==ID)
{
alert("ID為"+ID+"的元素已經存在!");
return;
}
}

if(ParentID==0)
{
this.data[ID]=new Array(ID,ParentID,TEXT,1,false,false,new Array());
}
else
{
//首先找到父節點
for(item in this.data)
{
if(this.data[item][0]==ParentID)
{
//在父節點的ID列表中加入
this.data[item][6][this.data[item][6].length]=ID;
var level=this.data[item][3]+1;
this.data[ID]=new Array(ID,ParentID,TEXT,level,false,false,new Array());
return;
}
}
//如果沒有找到
alert("沒有找到ParentID為"+ParentID+"的父節點");
return;
}
}

//*建立最初的表格，返回容器物件
function CreateTable() 
{
var TableID="maintable";
var TableText;
var classText="background-color:#FFFFFF;";  //這裡是控制風格的代碼
TableText="<table border=0 cellpadding=0 cellspacing=0 style='" + classText + "'" +
  " id='" + TableID + "'" +
  "><tbody><tr><td></td></tr></tbody></table>";
document.write(TableText);
return document.all[TableID].childNodes[0].childNodes[0].childNodes[0];  //返回最裡面儲存格的對象
}

//*建立一表格，作為外觀的行
function CreateRow(ID,text,level,IsClose,hasChild,Selected,locate)  //插入一行,在表格中第LOCATE行插入
{
//建立table標記
var table=document.createElement("TABLE");
table.setAttribute("id","t" + ID);
table.setAttribute("border","0");
table.setAttribute("cellpadding","0");
table.setAttribute("cellspacing","0");
table.setAttribute("height","16");
table.setAttribute("cellpadding","0");
//建立tbaby標記
var tbody=document.createElement("TBODY");
//建立tr標記
var tr =  document.createElement("TR");
//建立縮排儲存格
var indent=document.createElement("TD");
indent.setAttribute("width",(level-1)*16+1);
tr.appendChild(indent);
//建立圖片儲存格
var imgtd=document.createElement("TD");
imgtd.setAttribute("width","32");
//定義節點圖片
var ImagePath="./";  //定義圖片路徑
var ImgFC=ImagePath + "close.gif"  //關閉的父節點
var ImgFO=ImagePath + "open.gif"  //開啟的父節點
var ImgFCS=ImagePath + "closeselect.gif"  //關閉選中的父節點
var ImgFOS=ImagePath + "openselect.gif" //'開啟選中的父節點
var ImgCOS=ImagePath + "openitem.gif"  //開啟選中的子節點
var ImgCC=ImagePath + "closeitem.gif"   //關閉的子節點
var img; 
if(hasChild)  //如果有子節點
{
if(IsClose)  //如果是關閉的父節點
{
if(Selected){img=ImgFCS;}//如果是關閉未選中的父節點
else        {img=ImgFC; }//如果是關閉選中的父節點
}
else  //如果是開啟的父節點
{
if(Selected){img=ImgFOS; }//如果是開啟未選中的父節點
else        {img=ImgFO;}//如果是開啟選中的父節點
}
}
else  //如果沒有子節點
{
if(Selected){img=ImgCOS;}//如果是選中的子節點
else     {img=ImgCC; }//如果是未選中的子節點
}
//建立圖片標記
var nodeimg=document.createElement("IMG");
nodeimg.setAttribute("width","32");
nodeimg.setAttribute("height","16");
nodeimg.setAttribute("id","i" + ID);
nodeimg.setAttribute("src",img);
imgtd.appendChild(nodeimg);
tr.appendChild(imgtd);
//建立文本儲存格
var textnode=document.createElement("TD");
textnode.setAttribute("id","d" + ID);
textnode.setAttribute("title",text);
if(text.length>8){text=text.substr(0,8)+"..";}
textnode.innerText=text;
tr.appendChild(textnode);
//下面進行組合
tbody.appendChild(tr);
table.appendChild(tbody);
//下面插入主容器
if(locate<0||locate>this.container.childNodes.length-1)
{
this.container.appendChild(table);
}
else
{
this.container.insertBefore(table,this.container.childNodes[locate]);
}
//下面是控制風格的代碼
document.all["i"+ID].style.cursor="hand";
document.all["d"+ID].style.cursor="hand";
if(Selected==true)
{
document.all["d"+ID].style.backgroundColor="#003399";
document.all["d"+ID].style.color="#FFFFFF";
}
}
//查看下一部分

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=258913