怎么样用AJAX实现从数据库读取数据TreeView？
2、TreeView的实现: 此部分参考了梅花雪的TreeView。 TreeView.js
/*
设置TreeView样式
*/
functionsetTreeStyle()
{
varstyle="<style>";
style+="DIV.zhTreeViewDIVIMG{border:0pxsolid#FFFFFF;} ";
style+="DIV.zhTreeViewDIVSPANIMG{border:0pxsolid#FFFFFF;} ";
style+="DIV.zhTreeViewDIV{height:20px;line-height:20px;} ";
style+="DIV.zhTreeViewSPAN{vertical-align:top;font-size:10pt;height:20px;color:#D4D0C8;cursor:default;overflow:hidden;} ";
style+=".zhALink{color:#000000;text-decoration:none} ";
style+="</style>";
document.write(style);
}
/*
TreeView控件脚本
Author:zh
execRequestHandler:RequestHandler对象执行AJAX请求数据的函数名称,其参数为ID值
iconArray:节点图标图片,
iconArray各元素说明:+└┌├
0:"|"
1:"├"
2:"└"
3:"+┌"
4:"+├"
5:"+└"
6:"-┌"
7:"-├"
8:"-└"
9:"folderopen"//展开时的图标
10:"folderclose"//收缩时的图标
11:无子分类的图标
12:空白图片
13:"+-"
14:"--";
targetFrame:目录框架名称
colorMouseOver:OnMouseOver事件时的背景色
*/
functionOnMouseOverHandler(obj,objSpan)
{
SetBackgroundColor(obj.MouseOverColor,objSpan);
}
/*
处理OnMouseOut事件
*/
functionOnMouseOutHandler(objSpan)
{
SetBackgroundColor("",objSpan);
}
/*
设置控件的背景颜色
*/
functionSetBackgroundColor(colorBackground,objSpan)
{
varobjStyle=objSpan.getAttribute("style");
//如果Style属性存在
if(objStyle!=null&&objStyle!=undefined)
{
//设置背景颜色
objStyle.backgroundColor=colorBackground;
}
}
/*
处理双击展开或收缩节点事件
node:双击的节点
*/
functionClickHandler(node)
{
varbExpand=node.Expand;
if(bExpand)//展开,将要执行的是收缩,将的有子节点设置为关闭
{
CollapseAllSubNodes(node);
}
else//收缩,将要执行的是展开
{
varlevel=eval(node.Level);
level+=1;
//如果有数据，则直接展开
if(!node.IsRefresh&&node.hasChilds&&level>1)//没有数据，提取数据
{
//如果有子节点,创建一提示等待节点
waitNode=node.Tree.AppendNode("正在加载数据,请稍候...","","tmpNode","",false,level,1,true,false,node);
node.appendChild(waitNode);
//设置父节点
node.ExecRequestHandler.parentNode=node;
node.ExecRequestHandler.strID=node.Tag;
node.IsRefresh=true;
//请求数据
node.ExecRequestHandler.RequestData();
}
else
{
ExpandNextNodes(node);
}
}
//设置当前节点状态
node.Expand=!bExpand;
setIndetiferIcon(node,!bExpand);
setExpandCollapseImage(node,bExpand);
}
/*
设置指定节点的标识图标
node:欲设置图标的节点
bExpand:状态,true:展开,false:收缩
*/
setIndetiferIcon=function(node,bExpand)
{
//获取node的img对象
varimgObject=document.getElementById("img_"+node.Tag);
if(imgObject!=null&&imgObject!="undefined")
{
if(bExpand)
{
imgObject.src=node.IconArrays[9];
}
else
{
imgObject.src=node.IconArrays[10];
}
}
node.Expand=bExpand;
}
/*
展开指定节点的下一级子节点
parentNode:欲展开的节点
*/
ExpandNextNodes=function(parentNode)
{
varnode=null;
for(vari=1;i<parentNode.childNodes.length;++i)
{
node=parentNode.childNodes[i];
node.style.display="";
}
}
/*
收缩指定节点的所有子节点
parentNode:欲收缩的节点
*/
CollapseAllSubNodes=function(parentNode)
{
varnode=null;
varexpand=null;
for(vari=1;i<parentNode.childNodes.length;++i)
{
node=parentNode.childNodes[i];
node.style.display="NONE";
expand=node.getAttribute("Expand");
if(node.hasChilds==true&&expand!=null&&expand!=undefined)
{
//设置图标
setIndetiferIcon(node,false);
setExpandCollapseImage(node,true);
}
//递归调用
CollapseAllSubNodes(node);
}
}
/*
设置展开或收缩图片
node:点击的节点
state:true:展开,false:收缩
*/
setExpandCollapseImage=function(node,state)
{
varheaderImage=document.getElementById("header_img_"+node.Tag);
if(headerImage!=null&&headerImage!=undefined)
{
if(!state)//展开