您现在的位置:软界网技术中心WEB开发JavaScript > 技术显示
JavaScript TreeView
2008-1-3 6:25:37   网友评论       阅读次数 点此评论
   

这个JS数是对AJAXTreeView里的进一步修改,可以继承Sbqcel_Tree类,该类的构造函数需要显示树HTML的父节点的ID传进来,这里最好让树的实例名和父节点ID一致,因为有些事件方法需要用树实例去调用.
在继承类里需要注意的是:
1).必须指定AJAX调用的地址:
2).必须实现方法openNode,在这个方法里必须调用方法openCloseNode
3).必须实现方法getHtmlData,在这个方法里必须调用方法appendHtml
getHtmlData是对AJAX获取到的数据进行处理,因为不同的需求获取到的是树HTML数据不一样
获取到数据后可能还用调用其它方法进行一些处理,所以对openNode单独实现
有几个方法是要用到的:

String.prototype.Replace=function(oldValue,newValue)
{
returnthis.replace(newRegExp(oldValue,"gi"),newValue);
}
String.prototype.Trim=function()
{
returnthis.replace(/(^\s*)|(\s*$)/g,"");

软件开发网 www.mscto.com


}

functiongetObjById(id)
{
if(typeof(id)!="string"||id=="")returnnull;
if(document.getElementById)returndocument.getElementById(id);
if(document.all)returndocument.all(id);
try{returneval(id);}catch(e){returnnull;}
}Sbqcel_Tree类的代码如下:
functionSbqcel_Tree(objTreeID)
{
this.objTree=getObjById(objTreeID);
this.ajaxPath="";
this.IMG=[{id:1,imgSrc:"../images/open.gif",imgTitle:"点击折叠"},{id:2,imgSrc:"../images/close.gif",imgTitle:"点击展开"}];


this.TagName=[{id:1,name:"Tbl"},{id:2,name:"Td"},{id:3,name:"Img"},{id:4,name:"Div"}];
this.outBgColor="#F8F8F8";
this.clickBgColor="#b6c0db";
this.overBgColor="#e7edee";
this.target="_self";
this.pageUrl="#";
this.selectNodeID="";//存放选中的节点值
this.html="";

this.ID=function()
{
var_this=this;

return_this.selectNodeID!=""?_this.selectNodeID.Replace(_this.TagName[1].name,""):"";
};

this.openNode=function(objNode)
{
//该方法由继承类实现
//实现方法里必须调用openCloseNode方法
};

this.getHtmlData=function(param)
{
//该方法由继承类实现
//实现方法里必须调用appendHtml方法
};

this.openCloseNode=function(objNode,param)
{
var_this=this;
vardivObj=getObjById((objNode.id).Replace(_this.TagName[2].name,_this.TagName[3].name));
if(divObj.id=="Div0")returnnull;
if(_this.nodeType=="0")returndivObj;
if(objNode.title==_this.IMG[1].imgTitle)
{
objNode.src=_this.IMG[0].imgSrc;
objNode.title=_this.IMG[0].imgTitle;

divObj.style.display="block";


if(!divObj.innerHTML.length>0)
{
divObj.innerHTML="loading.";
_this.getHtmlData(param+divObj.id.Replace(_this.TagName[3].name,""));

}
}
else
{
objNode.src=_this.IMG[1].imgSrc;
objNode.title=_this.IMG[1].imgTitle;
divObj.style.display="none";
}
returndivObj;
};

this.callAjax=function(param)
{
var_this=this;
varajaxPath=_this.ajaxPath;
if(ajaxPath=="")
{
alert("请指定AJAX取数据路径");
return;
}
if(ajaxPath.indexOf(’?’)==-1)
{
ajaxPath=ajaxPath+"?";
}
varhttpRequest;
if(typeofXMLHttpRequest!=’undefined’)
{
httpRequest=newXMLHttpRequest();

软件开发网 www.mscto.cn


}
elseif(typeofActiveXObject!=’undefined’)
{
httpRequest=newActiveXObject(’Microsoft.XMLHTTP’);
}
if(httpRequest)
{

httpRequest.open(’get’,ajaxPath+param+"&"+Math.random(),false);
httpRequest.send(null);
if(httpRequest.status==200)
{
returnhttpRequest.responseText;
}
}
};

this.appendHtml=function(nodeId,html)
{
var_this=this;
varobjNode=getObjById(nodeId=="-1"?"Div0":"Div"+nodeId);
objNode.innerHTML=html;
if(html.length==0)
{
objNode.style.height="1px";  

      来源: 作者:
 
【评论查看】