运用ajax技术的树型菜单

树型菜单可以说是项目中应用最为广泛的运用。以前无论使用微软控件的树型，还是比较优秀的阿赖树型，都是将数据全部读出，然后再分级显示。这样如果数据量大，那么第一次显示将需要客户等待很长一段时间，降低了客户的体验度。如今使用ajax，事情变得简单了。

此运用参考了《征服web2.0开发技术详解》的例子。

我使用的平台是struts+spring+hibernate，但与ajax打交道的也就是struts。我无法将整个代码贴出来，因此把重要的前台ajax代码贴出来，至于后台的代码就看你自己所使用的技术了。

1、jsp页面

<% @pagelanguage = " java " contentType = " text/html;charset=GB2312 " import = " java.util.*,com.wehave.oa.cecontract.model.TbJyhtflb " %>
< html >
< head >
< title > Inserttitlehere </ title >
< linkrel = " stylesheet " href = " ../css/tree.css " >
<scripttype="text/javascript"src="../js/tree_htfl.js"></script>
<scriptlanguge="javascript">
functionShowDetail(ID,NAME,FLAG){
window.parent.right.location="getContract.go?method=doGetContract&folderID="+ID+"&&folderName="+NAME+"&&flag="+FLAG;
}
</script>
</head>
<bodybgcolor="#F6F9FF">
<tbody>
<tablecellpadding="0"cellspacing="0"width="300">
<divid="load"style="display:none"><imgsrc="../images/tree_loading.gif">Loadingdata..</div>
<ulclass="tree">
<%ListtreeList=(List)request.getAttribute("treefolder");
Iteratorit=treeList.iterator();
while(it.hasNext()){
out.println(it.next().toString());
}
%>
</table>
</tbody>
</body>
</html>

2、tree_htfl.js 代码

functionshowHide(id)
{
varel=document.getElementById(id);
varbExpand=true;
varimages=el.getElementsByTagName("IMG");
if(images[0].src.indexOf("tree_minus.gif")!=-1)
{
bExpand=false;
images[0].src="../images/tree_plus.gif";
}else{
images[0].src="../images/tree_minus.gif";
}
varsubs=el.lastChild;
if(bExpand)
subs.style.display="block";
else
subs.style.display="none";
}

functiongetSubTree(id,submitURL)
{
varsubmitURL=submitURL
postXmlHttp(submitURL,'parseSubTree("'+id+'")','load("'+id+'")');
}
functionparseSubTree(id)
{
varel=document.getElementById(id);
varulElmt=document.createElement("UL");
ulElmt.innerHTML=_xmlHttpRequestObj.responseText;
el.appendChild(ulElmt);
varimages=el.getElementsByTagName("IMG");
images[0].setAttribute("src","../images/tree_minus.gif");
images[0].setAttribute("onclick",newFunction("showHide('"+id+"')"));
varaTag=el.getElementsByTagName("A");
aTag[0].setAttribute("onclick",newFunction("showHide('"+id+"')"));
varloadDiv=document.getElementById("load");
loadDiv.style.display="none";
}

functionload(id)
{
varloadDiv=document.getElementById("load");
loadDiv.style.display="block";
}

var_postXmlHttpProcessPostChangeCallBack;
var_xmlHttpRequestObj;
var_loadingFunction;

functionpostXmlHttp(submitUrl,callbackFunc,loadFunc)
{
_postXmlHttpProcessPostChangeCallBack=callbackFunc;
_loadingFunction=loadFunc;
if(window.createRequest)
{
try{
_xmlHttpRequestObj=window.createRequest();
_xmlHttpRequestObj.open('POST',submitUrl,true);
_xmlHttpRequestObj.onreadystatechange=postXmlHttpProcessPostChange;
_xmlHttpRequestObj.send();
}
catch(ee){}
}
elseif(window.XMLHttpRequest)
{
_xmlHttpRequestObj=newXMLHttpRequest();
_xmlHttpRequestObj.overrideMimeType('text/xml');
_xmlHttpRequestObj.open('POST',submitUrl,true);
_xmlHttpRequestObj.onreadystatechange=postXmlHttpProcessPostChange;
_xmlHttpRequestObj.send("");
}
elseif(window.ActiveXObject)
{
_xmlHttpRequestObj=newActiveXObject("Microsoft.XMLHTTP");
_xmlHttpRequestObj.open('POST',submitUrl,true);
_xmlHttpRequestObj.onreadystatechange=postXmlHttpProcessPostChange;
_xmlHttpRequestObj.send();
}
};

functionpostXmlHttpProcessPostChange()
{
if(_xmlHttpRequestObj.readyState==4)
{
if(_xmlHttpRequestObj.status==200){
setTimeout(_postXmlHttpProcessPostChangeCallBack,2);
}else{
alert(_xmlHttpRequestObj.status);
}
}
if(_xmlHttpRequestObj.readyState==1)
{
setTimeout(_loadingFunction,2);
}
}

3、action代码

/***//**
*展开第一层目录
*/
publicActionForwarddoGetFolderList(
ActionMappingmapping,
ActionFormform,
HttpServletRequestreq,
HttpServletResponseres){
Listlist=treeCatalogService.getChildren("0");
ListTreeFolder=newArrayList();
Iteratorit=list.iterator();
while(it.hasNext()){
TbJyhtflbhtfl=(TbJyhtflb)it.next();
Strings=treeCatalogService.renderTreeViewAjax(htfl);
TreeFolder.add(s);
}
req.setAttribute("treefolder",TreeFolder);
returnmapping.findForward("foldertree");
}

/***//**
*展开下级目录
*/
publicActionForwarddoGetSubFolderList(
ActionMappingmapping,
ActionFormform,
HttpServletRequestreq,
HttpServletResponseres){
StringparentID=req.getParameter("parentID");//获得id的值
if(parentID!=null&&!parentID.equals("")){//如果不为null和空
res.setContentType("text/html;charset=GB2312");
Listlist=treeCatalogService.getChildren(parentID);
Iteratorit=list.iterator();
try{
PrintWriterout=res.getWriter();
while(it.hasNext()){
TbJyhtflbhtfl=(TbJyhtflb)it.next();
out.println(treeCatalogService.renderTreeViewAjax(htfl));
}
out.close();
}catch(Exceptione){
e.printStackTrace();
}
}
returnnull;
}

4、service层代码

/***//**
*函数说明：展开目录
*参数说明：目录对象
*返回值：展开目录的HTML代码
*/
publicStringrenderTreeViewAjax(TbJyhtflbhtfl){
StringBuffercontent=newStringBuffer();
StringID=htfl.getTbJyhtflbZlId();
StringNAME=htfl.getTbJyhtflbMc();
StringFLAG=htfl.getTbJyhtflbLb();
content.append("<liid='"+ID+"'>");
if(treeCatalogDAO.canExpand(ID))
content.append("<imgsrc=../images/tree_plus.gifonClick=/"getSubTree('"+ID+"')/">");
else
content.append("<imgsrc=../images/tree_blank.gif>");
content.append("<imgsrc=../images/tree_folder.gif><ahref=/"javascript:ShowDetail('"+ID+"','"+NAME+"','"+FLAG+"')/"");
if(treeCatalogDAO.canExpand(ID)){
StringsubmitURL="getFolderList.go?method=doGetSubFolderList&parentID="+ID;
content.append("onClick=/"getSubTree('"+ID+"',submitURL)/"");
}
content.append(">"+NAME+"</a>");

content.append("</li>");
returncontent.toString();
}

5、tree.css代码：

p{
font-family:arial;

}
a{
color:#000;
font-family:arial;
font-size:0.8em;
}

.tree{
margin:0px;
padding:0px;
}
.treeul{/**//*子结点*/
margin-left:20px;/**//*Leftspacing*/
padding-left:0px;
}
.treeli{/**//*结点*/
list-style-type:none;
vertical-align:middle;

}
.treelia{/**//*结点连接*/
color:#000;
text-decoration:none;
font-family:arial;
font-size:0.8em;
padding-left:2px;
}

代码基本就是这样了，希望对大家有用。