?
?? 樹型菜單可以說(shuō)是項(xiàng)目中應(yīng)用最為廣泛的運(yùn)用。以前無(wú)論使用微軟控件的樹型，還是比較優(yōu)秀的阿賴樹型，都是將數(shù)據(jù)全部讀出，然后再分級(jí)顯示。這樣如果數(shù)據(jù)量大，那么第一次顯示將需要客戶等待很長(zhǎng)一段時(shí)間，降低了客戶的體驗(yàn)度。如今使用ajax，事情變得簡(jiǎn)單了。
?? 此運(yùn)用參考了《征服web2.0開發(fā)技術(shù)詳解》的例子。
???我使用的平臺(tái)是struts+spring+hibernate，但與ajax打交道的也就是struts。我無(wú)法將整個(gè)代碼貼出來(lái)，因此把重要的前臺(tái)ajax代碼貼出來(lái)，至于后臺(tái)的代碼就看你自己所使用的技術(shù)了。
1、jsp頁(yè)面
<%
@?page?language
=
"
java
"
?contentType
=
"
text/html;?charset=GB2312
"
?
import
=
"
java.util.*,com.wehave.oa.cecontract.model.TbJyhtflb
"
%>
<
html
>
<
head
>
<
title
>
Insert?title?here
</
title
>
<
link?rel
=
"
stylesheet
"
?href?
=
?
"
../css/tree.css
"
>
<
script?type
=
"
text/javascript
"
?src
=
"
../js/tree_ajax.js
"
></
script
>
<
script?type
=
"
text/javascript
"
?src
=
"
../js/tree_htfl.js
"
></
script
>
<
script?languge
=
"
javascript
"
>
????function?ShowDetail(ID,NAME,FLAG)
{
????????window.parent.right.location?
=
"
getContract.go?method=doGetContract&folderID=
"
?
+
ID?
+
?
"
&&folderName=
"
+
NAME
+
"
&&flag=
"
+
FLAG;
????}
</
script
>
</
head
>
<
body?bgcolor
=
"
#F6F9FF
"
>
<
tbody
>
<
table?cellpadding
=
"
0
"
?cellspacing
=
"
0
"
?width
=
"
300
"
?
>
?
<
div?id
=
"
load
"
?style
=
"
display:none
"
>
?
<
img?src
=
"
../images/tree_loading.gif
"
>
Loading?data..
</
div
>
<
ul?
class
=
"
tree
"
>
<%
??List?treeList?
=
?(List)request.getAttribute(
"
treefolder
"
);
????Iterator?it
=
treeList.iterator();
????
while
(it.hasNext())
{
????????out.println(it.next().toString());
????}
%>
</
table
>
</
tbody
>
</
body
>
</
html
>
2、js代碼
function?showHide(?id?)
{
??var?el=?document.getElementById(?id?);
??var?bExpand?=?true;
??var?images?=?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";
??}
??var?subs=el.lastChild;
??if(bExpand)
????subs.style.display="block";
??else
????subs.style.display="none";
}
function?getSubTree(?id?,submitURL)
{
??var?submitURL=submitURL
??postXmlHttp(?submitURL,?'parseSubTree("'+id+'")'?,'load("'+id+'")');
}
function?parseSubTree(id)
{
??var?el=?document.getElementById(?id?);
??var?ulElmt=?document.createElement("UL");
??ulElmt.innerHTML=_xmlHttpRequestObj.responseText;
??el.appendChild(ulElmt);
??var?images?=?el.getElementsByTagName("IMG");
??images[0].setAttribute("src",?"../images/tree_minus.gif");
??images[0].setAttribute("onclick",?new?Function("showHide('"+id+"')"));
??var?aTag?=?el.getElementsByTagName("A");
??aTag[0].setAttribute("onclick",?new?Function("showHide('"+id+"')"));
??var?loadDiv=?document.getElementById(?"load"?);
??loadDiv.style.display="none";
}
function?load(id)
{
?var?loadDiv=?document.getElementById(?"load"?);
?loadDiv.style.display="block";
}
var?_postXmlHttpProcessPostChangeCallBack;
var?_xmlHttpRequestObj;
var?_loadingFunction;
function?postXmlHttp(?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){}
??}
??else?if(window.XMLHttpRequest)
??{
????_xmlHttpRequestObj=new?XMLHttpRequest();
????_xmlHttpRequestObj.overrideMimeType('text/xml');
????_xmlHttpRequestObj.open('POST',submitUrl,true);
????_xmlHttpRequestObj.onreadystatechange=postXmlHttpProcessPostChange;
????_xmlHttpRequestObj.send("");
??}
??else?if(window.ActiveXObject)
??{
????_xmlHttpRequestObj=new?ActiveXObject("Microsoft.XMLHTTP");
????_xmlHttpRequestObj.open('POST',submitUrl,true);
????_xmlHttpRequestObj.onreadystatechange=postXmlHttpProcessPostChange;
????_xmlHttpRequestObj.send();
??}
};
function?postXmlHttpProcessPostChange(?)
{
??if(?_xmlHttpRequestObj.readyState==4)
??{
??????if(_xmlHttpRequestObj.status==200){
????????setTimeout(?_postXmlHttpProcessPostChangeCallBack,?2?);
????}else{
????????alert(_xmlHttpRequestObj.status);
????}
??}
??if?(?_xmlHttpRequestObj.readyState==1?)
??{
????setTimeout(?_loadingFunction,?2?);
??}
} 3、action代碼
/**?*//**
?????*?展開第一層目錄
?????*/
????public?ActionForward?doGetFolderList(
????????????ActionMapping?mapping,
????????????ActionForm?form,
????????????HttpServletRequest?req,
????????????HttpServletResponse?res){
????????List?list?=?treeCatalogService.getChildren("0");
????????List?TreeFolder=new?ArrayList();
????????Iterator?it=list.iterator();
????????while(it.hasNext()){
????????????TbJyhtflb?htfl=(TbJyhtflb)it.next();
????????????String?s=treeCatalogService.renderTreeViewAjax(htfl);
????????????TreeFolder.add(s);
????????}
????????req.setAttribute("treefolder",TreeFolder);
????????return?mapping.findForward("foldertree");
????}
????
????/**?*//**
?????*?展開下級(jí)目錄
?????*/
????public?ActionForward?doGetSubFolderList(
????????????ActionMapping?mapping,
????????????ActionForm?form,
????????????HttpServletRequest?req,
????????????HttpServletResponse?res){
????????String?parentID?=?req.getParameter("parentID");?//獲得id的值
????????if?(parentID!=null&&!parentID.equals("")){?//如果不為null和空
????????????res.setContentType("text/html;charset=GB2312");
????????????List?list?=?treeCatalogService.getChildren(parentID);
????????????Iterator?it=list.iterator();
????????????try?{
????????????????PrintWriter?out=?res.getWriter();
????????????????while(it.hasNext()){
????????????????????TbJyhtflb?htfl=(TbJyhtflb)it.next();
????????????????????out.println(treeCatalogService.renderTreeViewAjax(htfl));
????????????????}
????????????????out.close();
????????????}catch(Exception?e){
????????????????e.printStackTrace();
????????????}
????????}
????????return?null;
????} 4、service層代碼
/**?*//**
?????*?函數(shù)說(shuō)明：展開目錄
?????*?參數(shù)說(shuō)明：?目錄對(duì)象
?????*?返回值：展開目錄的HTML代碼
?????*/
????public?String?renderTreeViewAjax(TbJyhtflb?htfl)?{
????????StringBuffer?content?=?new?StringBuffer();
????????String?ID=htfl.getTbJyhtflbZlId();
????????String?NAME=htfl.getTbJyhtflbMc();
????????String?FLAG=htfl.getTbJyhtflbLb();
????????content.append("<li?id='"+ID+"'>");
????????if?(treeCatalogDAO.canExpand(ID))
????????????content.append("<img?src=../images/tree_plus.gif?onClick=\"getSubTree('"+ID+"')\">");
????????else
????????????content.append("<img?src=../images/tree_blank.gif>");
????????content.append("<img?src=../images/tree_folder.gif><a?href=\"javascript:ShowDetail('"+ID+"','"+NAME+"','"+FLAG+"')\"");
????????if?(treeCatalogDAO.canExpand(ID)){
????????????String?submitURL="getFolderList.go?method=doGetSubFolderList&parentID="+ID;
????????????content.append("?onClick=\"getSubTree('"+ID+"',submitURL)\"");
????????}
????????content.append(">"+NAME+"</a>");
????????
????????content.append("</li>");
????????return?content.toString();
????} 代碼基本就是這樣了，希望對(duì)大家有用。