利用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