亚洲福利视频一区二区,亚洲国产电影av在线网址,国产国拍亚洲精品福利

運(yùn)用ajax技術(shù)的樹(shù)型菜單

?? 樹(shù)型菜單可以說(shuō)是項(xiàng)目中應(yīng)用最為廣泛的運(yùn)用。以前無(wú)論使用微軟控件的樹(shù)型，還是比較優(yōu)秀的阿賴(lài)樹(shù)型，都是將數(shù)據(jù)全部讀出，然后再分級(jí)顯示。這樣如果數(shù)據(jù)量大，那么第一次顯示將需要客戶(hù)等待很長(zhǎng)一段時(shí)間，降低了客戶(hù)的體驗(yàn)度。如今使用ajax，事情變得簡(jiǎn)單了。

?? 此運(yùn)用參考了《征服web2.0開(kāi)發(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 " >??

????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、tree_htfl.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代碼

/**

?????*?展開(kāi)第一層目錄

?????*/

????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");

????}

????

????/**

?????*?展開(kāi)下級(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ō)明：展開(kāi)目錄

?????*?參數(shù)說(shuō)明：?目錄對(duì)象

?????*?返回值：展開(kāi)目錄的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();

????}

5、tree.css代碼：

????p{

????????font-family:arial;

????????

????}

????a{

????????color:#000;

????????font-family:arial;

????????font-size:0.8em;

????}

????

????.tree{

????????margin:0px;

????????padding:0px;

????}

????.tree?ul{????/*子結(jié)點(diǎn)*/

????????margin-left:20px;????/*?Left?spacing?*/

????????padding-left:0px;

????}

????.tree?li{????/*?結(jié)點(diǎn)?*/?

????????list-style-type:none;

????????vertical-align:middle;

????????

????}

????.tree?li?a{????/*?結(jié)點(diǎn)連接?*/

????????color:#000;

????????text-decoration:none;

????????font-family:arial;

????????font-size:0.8em;

????????padding-left:2px;

????}

代碼基本就是這樣了，希望對(duì)大家有用。

posted on 2006-07-24 10:03 千山鳥(niǎo)飛絕閱讀(13865) 評(píng)論(54) 編輯收藏所屬分類(lèi): Ajax

老婆的Blog

搜索

積分與排名

積分 - 775263

排名 - 56

最新評(píng)論

閱讀排行榜

評(píng)論排行榜

常用鏈接

留言簿(35)

隨筆檔案

文章分類(lèi)

文章檔案

好友的blog

我的其他blog

老婆的Blog

搜索

積分與排名

最新評(píng)論

閱讀排行榜

評(píng)論排行榜


只有注冊(cè)用戶(hù)登錄后才能發(fā)表評(píng)論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問(wèn) 管理
相關(guān)文章: responseXML.documentElement 的問(wèn)題 Ajax實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)下拉框運(yùn)用Ajax通過(guò)select下拉框獲得數(shù)據(jù) 運(yùn)用ajax制作提示頁(yè)面運(yùn)用ajax技術(shù)的樹(shù)型菜單 Ajax實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)下拉框動(dòng)態(tài)檢查文本框中的數(shù)據(jù)