运用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>

<tbody>

<div id="load" style="display:none"> <img src="../images/tree_loading.gif">Loading data..</div>

<% 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代码：

font-family:arial;

}

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 千山鸟飞绝阅读(13857) 评论(54) 编辑收藏所属分类: Ajax

常用链接

留言簿(35)

随笔档案

文章分类

文章档案

好友的blog

我的其他blog

老婆的Blog

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻 Chat2DB C++博客博问管理
相关文章: responseXML.documentElement 的问题 Ajax实现三级联动下拉框运用Ajax通过select下拉框获得数据运用ajax制作提示页面运用ajax技术的树型菜单 Ajax实现二级联动下拉框动态检查文本框中的数据