| Blog信息 |
|
blog名称:
日志总数:1304
评论数量:2242
留言数量:5
访问次数:7598884
建立时间:2006年5月29日 |
| |
|
 [Java Open Source]运用ajax技术的树型菜单
软件技术
lhwork 发表于 2006/7/24 10:16:47 |
| 树型菜单可以说是项目中应用最为广泛的运用。以前无论使用微软控件的树型，还是比较优秀的阿赖树型，都是将数据全部读出，然后再分级显示。这样如果数据量大，那么第一次显示将需要客户等待很长一段时间，降低了客户的体验度。如今使用ajax，事情变得简单了。
此运用参考了《征服web2.0开发技术详解》的例子。
我使用的平台是struts+spring+hibernate，但与ajax打交道的也就是struts。我无法将整个代码贴出来，因此把重要的前台ajax代码贴出来，至于后台的代码就看你自己所使用的技术了。1、jsp页面
500)this.width=500'>
<%
@ page language
=
"
java
"
contentType
=
"
text/html; charset=GB2312
"
import
=
"
java.util.*,com.wehave.oa.cecontract.model.TbJyhtflb
"
%>
500)this.width=500'>
<
html
>
500)this.width=500'>
<
head
>
500)this.width=500'>
<
title
>
Insert title here
</
title
>
500)this.width=500'>
<
link rel
=
"
stylesheet
"
href
=
"
../css/tree.css
"
>
500)this.width=500'>
<
script type
=
"
text/javascript
"
src
=
"
../js/tree_ajax.js
"
></
script
>
500)this.width=500'>
<
script type
=
"
text/javascript
"
src
=
"
../js/tree_htfl.js
"
></
script
>
500)this.width=500'>
<
script languge
=
"
javascript
"
>
500)this.width=500'>
500)this.width=500'> function ShowDetail(ID,NAME,FLAG)
500)this.width=500'>
{500)this.width=500'> window.parent.right.location
=
"
getContract.go?method=doGetContract&folderID=
"
+
ID
+
"
&&folderName=
"
+
NAME
+
"
&&flag=
"
+
FLAG;500)this.width=500'> }
500)this.width=500'>
</
script
>
500)this.width=500'>
</
head
>
500)this.width=500'>
<
body bgcolor
=
"
#F6F9FF
"
>
500)this.width=500'>
<
tbody
>
500)this.width=500'>
<
table cellpadding
=
"
0
"
cellspacing
=
"
0
"
width
=
"
300
"
>
500)this.width=500'>
<
div id
=
"
load
"
style
=
"
display:none
"
>
<
img src
=
"
../images/tree_loading.gif
"
>
Loading data..
</
div
>
500)this.width=500'>
<
ul
class
=
"
tree
"
>
500)this.width=500'>
<%
List treeList
=
(List)request.getAttribute(
"
treefolder
"
);500)this.width=500'> Iterator it
=
treeList.iterator();500)this.width=500'>500)this.width=500'>
while
(it.hasNext())
500)this.width=500'>
{500)this.width=500'> out.println(it.next().toString());500)this.width=500'> }
500)this.width=500'>
%>
500)this.width=500'>
</
table
>
500)this.width=500'>
</
tbody
>
500)this.width=500'>
</
body
>
500)this.width=500'>
</
html
>
2、js代码500)this.width=500'>function showHide( id )500)this.width=500'>500)this.width=500'>500)this.width=500'>{500)this.width=500'> var el= document.getElementById( id );500)this.width=500'> var bExpand = true;500)this.width=500'> var images = el.getElementsByTagName("IMG");500)this.width=500'> if (images[0].src.indexOf("tree_minus.gif")!=-1)500)this.width=500'>500)this.width=500'> 500)this.width=500'>{500)this.width=500'> bExpand = false;500)this.width=500'> images[0].src="../images/tree_plus.gif";500)this.width=500'>500)this.width=500'> }else500)this.width=500'>{500)this.width=500'> images[0].src="../images/tree_minus.gif";500)this.width=500'> }500)this.width=500'> var subs=el.lastChild;500)this.width=500'> if(bExpand)500)this.width=500'> subs.style.display="block";500)this.width=500'> else500)this.width=500'> subs.style.display="none";500)this.width=500'>}500)this.width=500'>500)this.width=500'>function getSubTree( id ,submitURL)500)this.width=500'>500)this.width=500'>500)this.width=500'>{500)this.width=500'> var submitURL=submitURL500)this.width=500'> postXmlHttp( submitURL, 'parseSubTree("'+id+'")' ,'load("'+id+'")');500)this.width=500'>}500)this.width=500'>function parseSubTree(id)500)this.width=500'>500)this.width=500'>500)this.width=500'>{500)this.width=500'> var el= document.getElementById( id );500)this.width=500'> var ulElmt= document.createElement("UL");500)this.width=500'> ulElmt.innerHTML=_xmlHttpRequestObj.responseText;500)this.width=500'> el.appendChild(ulElmt);500)this.width=500'> var images = el.getElementsByTagName("IMG");500)this.width=500'> images[0].setAttribute("src", "../images/tree_minus.gif");500)this.width=500'> images[0].setAttribute("onclick", new Function("showHide('"+id+"')"));500)this.width=500'> var aTag = el.getElementsByTagName("A");500)this.width=500'> aTag[0].setAttribute("onclick", new Function("showHide('"+id+"')"));500)this.width=500'> var loadDiv= document.getElementById( "load" );500)this.width=500'> loadDiv.style.display="none";500)this.width=500'>}500)this.width=500'>500)this.width=500'>function load(id)500)this.width=500'>500)this.width=500'>500)this.width=500'>{500)this.width=500'> var loadDiv= document.getElementById( "load" );500)this.width=500'> loadDiv.style.display="block";500)this.width=500'>}500)this.width=500'>500)this.width=500'>var _postXmlHttpProcessPostChangeCallBack;500)this.width=500'>var _xmlHttpRequestObj;500)this.width=500'>var _loadingFunction;500)this.width=500'>500)this.width=500'>function postXmlHttp( submitUrl, callbackFunc ,loadFunc)500)this.width=500'>500)this.width=500'>500)this.width=500'>{500)this.width=500'> _postXmlHttpProcessPostChangeCallBack = callbackFunc;500)this.width=500'> _loadingFunction = loadFunc;500)this.width=500'> if(window.createRequest)500)this.width=500'>500)this.width=500'> 500)this.width=500'>{500)this.width=500'>500)this.width=500'> try500)this.width=500'>{500)this.width=500'> _xmlHttpRequestObj=window.createRequest();500)this.width=500'> _xmlHttpRequestObj.open('POST',submitUrl,true);500)this.width=500'> _xmlHttpRequestObj.onreadystatechange=postXmlHttpProcessPostChange;500)this.width=500'> _xmlHttpRequestObj.send();500)this.width=500'> }500)this.width=500'>500)this.width=500'> catch(ee)500)this.width=500'>{}500)this.width=500'> }500)this.width=500'> else if(window.XMLHttpRequest)500)this.width=500'>500)this.width=500'> 500)this.width=500'>{500)this.width=500'> _xmlHttpRequestObj=new XMLHttpRequest();500)this.width=500'> _xmlHttpRequestObj.overrideMimeType('text/xml');500)this.width=500'> _xmlHttpRequestObj.open('POST',submitUrl,true);500)this.width=500'> _xmlHttpRequestObj.onreadystatechange=postXmlHttpProcessPostChange;500)this.width=500'> _xmlHttpRequestObj.send("");500)this.width=500'> }500)this.width=500'> else if(window.ActiveXObject)500)this.width=500'>500)this.width=500'> 500)this.width=500'>{500)this.width=500'> _xmlHttpRequestObj=new ActiveXObject("Microsoft.XMLHTTP");500)this.width=500'> _xmlHttpRequestObj.open('POST',submitUrl,true);500)this.width=500'> _xmlHttpRequestObj.onreadystatechange=postXmlHttpProcessPostChange;500)this.width=500'> _xmlHttpRequestObj.send();500)this.width=500'> }500)this.width=500'>};500)this.width=500'>500)this.width=500'>function postXmlHttpProcessPostChange( )500)this.width=500'>500)this.width=500'>500)this.width=500'>{500)this.width=500'> if( _xmlHttpRequestObj.readyState==4)500)this.width=500'>500)this.width=500'> 500)this.width=500'>{500)this.width=500'>500)this.width=500'> if(_xmlHttpRequestObj.status==200)500)this.width=500'>{500)this.width=500'> setTimeout( _postXmlHttpProcessPostChangeCallBack, 2 );500)this.width=500'>500)this.width=500'> }else500)this.width=500'>{500)this.width=500'> alert(_xmlHttpRequestObj.status);500)this.width=500'> }500)this.width=500'> }500)this.width=500'> if ( _xmlHttpRequestObj.readyState==1 )500)this.width=500'>500)this.width=500'> 500)this.width=500'>{500)this.width=500'> setTimeout( _loadingFunction, 2 );500)this.width=500'> }500)this.width=500'>}3、action代码500)this.width=500'>500)this.width=500'>/** *//**500)this.width=500'> * 展开第一层目录500)this.width=500'> */500)this.width=500'> public ActionForward doGetFolderList(500)this.width=500'> ActionMapping mapping,500)this.width=500'> ActionForm form,500)this.width=500'> HttpServletRequest req,500)this.width=500'>500)this.width=500'> HttpServletResponse res)500)this.width=500'>{500)this.width=500'> List list = treeCatalogService.getChildren("0");500)this.width=500'> List TreeFolder=new ArrayList();500)this.width=500'> Iterator it=list.iterator();500)this.width=500'>500)this.width=500'> while(it.hasNext())500)this.width=500'>{500)this.width=500'> TbJyhtflb htfl=(TbJyhtflb)it.next();500)this.width=500'> String s=treeCatalogService.renderTreeViewAjax(htfl);500)this.width=500'> TreeFolder.add(s);500)this.width=500'> }500)this.width=500'> req.setAttribute("treefolder",TreeFolder);500)this.width=500'> return mapping.findForward("foldertree");500)this.width=500'> }500)this.width=500'> 500)this.width=500'>500)this.width=500'> /** *//**500)this.width=500'> * 展开下级目录500)this.width=500'> */500)this.width=500'> public ActionForward doGetSubFolderList(500)this.width=500'> ActionMapping mapping,500)this.width=500'> ActionForm form,500)this.width=500'> HttpServletRequest req,500)this.width=500'>500)this.width=500'> HttpServletResponse res)500)this.width=500'>{500)this.width=500'> String parentID = req.getParameter("parentID"); //获得id的值500)this.width=500'>500)this.width=500'> if (parentID!=null&&!parentID.equals(""))500)this.width=500'>{ //如果不为null和空500)this.width=500'> res.setContentType("text/html;charset=GB2312");500)this.width=500'> List list = treeCatalogService.getChildren(parentID);500)this.width=500'> Iterator it=list.iterator();500)this.width=500'>500)this.width=500'> try 500)this.width=500'>{500)this.width=500'> PrintWriter out= res.getWriter();500)this.width=500'>500)this.width=500'> while(it.hasNext())500)this.width=500'>{500)this.width=500'> TbJyhtflb htfl=(TbJyhtflb)it.next();500)this.width=500'> out.println(treeCatalogService.renderTreeViewAjax(htfl));500)this.width=500'> }500)this.width=500'> out.close();500)this.width=500'>500)this.width=500'> }catch(Exception e)500)this.width=500'>{500)this.width=500'> e.printStackTrace();500)this.width=500'> }500)this.width=500'> }500)this.width=500'> return null;500)this.width=500'> }4、service层代码500)this.width=500'>500)this.width=500'>/** *//**500)this.width=500'> * 函数说明：展开目录500)this.width=500'> * 参数说明： 目录对象500)this.width=500'> * 返回值：展开目录的HTML代码500)this.width=500'> */500)this.width=500'>500)this.width=500'> public String renderTreeViewAjax(TbJyhtflb htfl) 500)this.width=500'>{500)this.width=500'> StringBuffer content = new StringBuffer();500)this.width=500'> String ID=htfl.getTbJyhtflbZlId();500)this.width=500'> String NAME=htfl.getTbJyhtflbMc();500)this.width=500'> String FLAG=htfl.getTbJyhtflbLb();500)this.width=500'> content.append("<li id='"+ID+"'>");500)this.width=500'> if (treeCatalogDAO.canExpand(ID))500)this.width=500'> content.append("<img src=../images/tree_plus.gif onClick=\"getSubTree('"+ID+"')\">");500)this.width=500'> else500)this.width=500'> content.append("<img src=../images/tree_blank.gif>");500)this.width=500'> content.append("<img src=../images/tree_folder.gif><a href=\"javascript :ShowDetail('"+ID+"','"+NAME+"','"+FLAG+"')\"");500)this.width=500'>500)this.width=500'> if (treeCatalogDAO.canExpand(ID))500)this.width=500'>{500)this.width=500'> String submitURL="getFolderList.go?method=doGetSubFolderList&parentID="+ID;500)this.width=500'> content.append(" onClick=\"getSubTree('"+ID+"',submitURL)\"");500)this.width=500'> }500)this.width=500'> content.append(">"+NAME+"</a>");500)this.width=500'> 500)this.width=500'> content.append("</li>");500)this.width=500'> return content.toString();500)this.width=500'> }代码基本就是这样了，希望对大家有用。 |
|
|