利用JavaScript实现树型结构的TreeView类!(源代码,欢迎大家指教
来源:互联网 发布:java 获取object 类型 编辑:程序博客网 时间:2024/05/23 22:30
/*===================================================
说明:这是一个用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";
}
}
//查看下一部分
说明:这是一个用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";
}
}
//查看下一部分
- 利用JavaScript实现树型结构的TreeView类!(源代码,欢迎大家指教
- 欢迎大家指教
- 模仿TreeView结构的树结构类
- 刚进来,欢迎大家多多指教!
- 新人报道 欢迎大家分享交流指教
- 望大家互相指教,每个html语言必须的基本结构
- Jquery的treeview插件实现树形结构
- 树treeview的好文章和源代码
- 刚刚申请加入的,请大家多多指教
- Javascript 实现TreeView
- Windows Form下TreeView的树型结构问题
- C#不用treeview控件生成漂亮的树型结构
- 对Android TreeView 的实现,目录结构的实现
- 我现在刚学C语言,请大家指教以下关于C语言循环结构的问题!!
- 整理一下java笔试题吧(请大家多指教)2--------有关java的单根结构
- CosOS源代码发布,欢迎大家共同研究
- TreeView 树结构的断层处理
- TreeView 树结构的断层处理
- J2ME--丰富多彩的领域中生机勃勃的技术【转贴】
- Spring中读取bean配置文件的几种方式
- httpd.conf最新中文版
- 两个小函数让你的ASP程序对SQL注入免疫!
- 海量数据索引使用(zt自sunsnow8)
- 利用JavaScript实现树型结构的TreeView类!(源代码,欢迎大家指教
- 图书馆管理实施建议
- Eclipse 知识
- 放假回家喽
- sql注入语句(ZT)
- Java 存取Blob、Clob数据。(转载)
- JOSSO配置完全手册
- J2EE开发模式探讨(小方)
- 干煸肉丝的做法