亚洲综合久久久,国产粉嫩在线观看,国产精品日韩一区二区三区

運用ajax技術的樹型菜單

?? 樹型菜單可以說是項目中應用最為廣泛的運用。以前無論使用微軟控件的樹型，還是比較優秀的阿賴樹型，都是將數據全部讀出，然后再分級顯示。這樣如果數據量大，那么第一次顯示將需要客戶等待很長一段時間，降低了客戶的體驗度。如今使用ajax，事情變得簡單了。

?? 此運用參考了《征服web2.0開發技術詳解》的例子。

???我使用的平臺是struts+spring+hibernate，但與ajax打交道的也就是struts。我無法將整個代碼貼出來，因此把重要的前臺ajax代碼貼出來，至于后臺的代碼就看你自己所使用的技術了。

1、jsp頁面

<% @?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代碼

/**

?????*?展開第一層目錄

?????*/

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

????}

????

????/**

?????*?展開下級目錄

?????*/

????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層代碼

/**

?????*?函數說明：展開目錄

?????*?參數說明：?目錄對象

?????*?返回值：展開目錄的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{????/*子結點*/

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

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

????}

????.tree?li{????/*?結點?*/?

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

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

????????

????}

????.tree?li?a{????/*?結點連接?*/

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

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

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

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

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

????}

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

posted on 2006-07-24 10:03 千山鳥飛絕閱讀(13865) 評論(54) 編輯收藏所屬分類: Ajax

常用鏈接

留言簿(35)

隨筆檔案

文章分類

文章檔案

好友的blog

我的其他blog

老婆的Blog

搜索

積分與排名

最新評論

閱讀排行榜

評論排行榜


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: responseXML.documentElement 的問題 Ajax實現三級聯動下拉框運用Ajax通過select下拉框獲得數據運用ajax制作提示頁面運用ajax技術的樹型菜單 Ajax實現二級聯動下拉框動態檢查文本框中的數據