运用ajax技术的树型菜单

导读：
　　JAVA涂鸦
　　posts - 46, comments - 406, trackbacks - 0
　　树型菜单可以说是项目中应用最为广泛的运用。以前无论使用微软控件的树型，还是比较优秀的阿赖树型，都是将数据全部读出，然后再分级显示。这样如果数据量大，那么第一次显示将需要客户等待很长一段时间，降低了客户的体验度。如今使用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"%> ?rel="stylesheet"?href?=?"../css/tree.css">??<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> ? ? Loading?data.. <%??List?treeList?=?(List)request.getAttribute("treefolder");
　　Iterator?it=treeList.iterator();
　　while(it.hasNext()){
　　out.println(it.next().toString());
　　}%>
　　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(" ");
　　if?(treeCatalogDAO.canExpand(ID))
　　content.append(" ");
　　else????????????content.append(" ");
　　content.append(" 　　if?(treeCatalogDAO.canExpand(ID)){
　　String?submitURL="getFolderList.go?method=doGetSubFolderList&parentID="+ID;
　　content.append("?onClick=/"getSubTree('"+ID+"',submitURL)/"");
　　}????????content.append(">"+NAME+"");
　　
　　content.append("");
　　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;
　　}
　　代码基本就是这样了，希望对大家有用。
　　千山鸟飞绝评论(33)编辑收藏Ajax
　　 FeedBack:
　　# re: 运用ajax技术的树型菜单
　　能共享一下源文件吗？li98311@etang.com非常感谢 回复 更多评论
　　
　　# re: 运用ajax技术的树型菜单
　　# re: 运用ajax技术的树型菜单 inber
　　希望能看一下你的展示程序，如果可能能发份代码吗:)
　　inber520@yahoo.com.cn 回复 更多评论
　　
　　# re: 运用ajax技术的树型菜单
　　可以发给我一份源代码吗？多谢了！
　　vycon@163.com 回复 更多评论
　　
　　# re: 运用ajax技术的树型菜单 千山鸟飞绝
　　不知道大家需要的源码是什么，是《征服》里源码吗？
　　因为我这是项目中的代码，所以不可能是一个很完整的可以直接copy下来就运行的，但我还是将最重要的代码给贴出来了。 回复 更多评论
　　
　　# re: 运用ajax技术的树型菜单
　　可否把tree.css的代码发上来？谢谢 回复 更多评论
　　
　　# re: 运用ajax技术的树型菜单 zJun's帛罗阁
　　是怎么构造树的呢？是在tree_ajax.js和tree_htfl.js中吗？哪里可以找到这两个文件呢，这两个文件所有的内容就是文章中提供的js文件的内容吗?最好能提供这两个文件的代码。现在这样看有点摸不着头脑。 回复 更多评论
　　
　　# re: 运用ajax技术的树型菜单 千山鸟飞绝
　　我重新修改了一下，提交了tree.css代码。
　　另外tree_ajax.js是不需要的，我已经删除。 回复 更多评论
　　
　　# re: 运用ajax技术的树型菜单
　　把你代码能否共享一下,谢谢
　　wuxj888@yahoo.com.cn 回复 更多评论
　　
　　# re: 运用ajax技术的树型菜单
　　ccyy978@126.com
　　谢谢楼主 回复 更多评论
　　
　　# re: 运用ajax技术的树型菜单
　　感谢，研究下先
　　service层代码 里边包含了太多的 html 了吧？这样想要修改下样式还要对service里边动刀，感觉不太妥当！ 回复 更多评论
　　
　　# re: 运用ajax技术的树型菜单
　　dingqf@sttri.com.cn
　　谢谢搂住,我要生成个5k个节点的树! 回复 更多评论
　　
　　# re: 运用ajax技术的树型菜单
　　ajax没推出之前，也用过这样显示，这样显示的问题是点击展开菜单的时候，如数据量大用户还是要等一段时间。
　　而全部读出分级显示只是第一次等待而已，以后则很快。各有利弊吧 回复 更多评论
　　
　　# re: 运用ajax技术的树型菜单 千山鸟飞绝
　　这样显示的问题是点击展开菜单的时候，如数据量大用户还是要等一段时间。
　　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　这是数据量相当大才会出现这种情况。如果一个子目录下都有这么多信息，那么整个目录一起读取将会等待多久呢。 回复 更多评论
　　
　　# re: 运用ajax技术的树型菜单 千山鸟飞绝
　　service层代码 里边包含了太多的 html 了吧？这样想要修改下样式还要对service里边动刀，感觉不太妥当！
　　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　确实是这样，希望大家共同研究。 回复 更多评论
　　
　　# re: 运用ajax技术的树型菜单
　　《征》作者原来是images[0].setAttribute("onclick", "showHide('"+id+"')")这样写的，是不对的。
　　应该是images[0].setAttribute("onclick", new Function("showHide('"+id+"')"))。
　　以上大家注意了 回复 更多评论
　　
　　# re: 运用ajax技术的树型菜单 千山鸟飞绝
　　@哈哈哈
　　《征》所用的方法适合firefox这类浏览器。而如果要兼容IE浏览器就必须new Function了。
　　回复 更多评论
　　
　　# re: 运用ajax技术的树型菜单 213123
　　123123123 回复 更多评论
　　
　　# re: 运用ajax技术的树型菜单
　　能否发一下源码　　qq522540@gmail.com 回复 更多评论
　　
　　# re: 运用ajax技术的树型菜单
　　可否发一封给我啊，wangguan_xd@126.com。先谢过了！ 回复 更多评论
　　
　　# re: 运用ajax技术的树型菜单[未登录]
　　楼主,可否也给我一份代码,树的
　　谢谢了
　　aprilsuny@163.com 非常感谢!希望你能看到 回复 更多评论
　　
　　# re: 运用ajax技术的树型菜单 千山鸟飞绝
　　因为这是写在项目中的代码，所以无法给大家。
　　等下次那天有空，做个单独的DEMO，让大家下载。
　　我的这个树是参考了《征服web2.0开发技术详解》书中的例子。大家也可以去看看这本书。 回复 更多评论
　　
　　# re: 运用ajax技术的树型菜单
　　这个还不错，谢了。不过有没更先进一点的啊。
　　如果有，帮忙发过来。yinhui.java@163.com 回复 更多评论
　　
　　# re: 运用ajax技术的树型菜单 天路
　　谢谢，学习中
　　wfjvip@126.com
　　请共享一份。 回复 更多评论
　　
　　# re: 运用ajax技术的树型菜单
　　好东西，楼主分享一份
　　hehua513@163.com 回复 更多评论
　　
　　# re: 运用ajax技术的树型菜单
　　谢谢 回复 更多评论
　　
　　# re: 运用ajax技术的树型菜单
　　能否发一份源码？谢谢！ sailsoft@tom.com 回复 更多评论
　　
　　# re: 运用ajax技术的树型菜单[未登录]
　　楼主，
　　能否给我发一份源代码呀？
　　我很需要那，，，，，
　　希望能得到你的回复，，，，
　　先谢谢了。。。。。。
　　我的邮箱：wfj587@126.com 回复 更多评论
　　
　　# re: 运用ajax技术的树型菜单 守望者
　　迫切希望楼主能整理下,共享下!谢谢
　　zhouliming-521@163.com 回复 更多评论
　　
　　# re: 运用ajax技术的树型菜单[未登录]
　　请发到我邮箱来 frank18@126.com 回复 更多评论
　　
　　# re: 运用ajax技术的树型菜单 创世纪计算机
　　这种很不错，现在已经出来好几种了，各有所长~ 回复 更多评论
　　
　　# re: 运用ajax技术的树型菜单
　　我也迫切需要 可以的话发我一份 rennuoting@126.com 回复 更多评论
　　
　　# re: 运用ajax技术的树型菜单
　　我也需要 可以的话发我一份 joney_110@163.com 回复 更多评论
　　
　　标题
　　姓名
　　主页
　　验证码 *
　　
　　
　　内容(请不要发表任何与政治相关的内容)
　　
　　Remember Me?
　　[使用Ctrl+Enter键可以直接提交]
　　该文被作者在 2006-08-01 09:13 编辑过
　　
　　

本文转自
http://www.blogjava.net/rickhunter/articles/59742.html