该版本的程序采用数组代替了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