樹(shù)型菜單可以說(shuō)是項目中應用最為廣泛的運用。以前無(wú)論使用微軟控件的樹(shù)型，還是比較優(yōu)秀的阿賴(lài)樹(shù)型，都是將數據全部讀出，然后再分級顯示。這樣如果數據量大，那么第一次顯示將需要客戶(hù)等待很長(cháng)一段時(shí)間，降低了客戶(hù)的體驗度。如今使用ajax，事情變得簡(jiǎn)單了。
此運用參考了《征服web2.0開(kāi)發(fā)技術(shù)詳解》的例子。
我使用的平臺是struts+spring+hibernate，但與ajax打交道的也就是struts。我無(wú)法將整個(gè)代碼貼出來(lái)，因此把重要的前臺ajax代碼貼出來(lá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 " >
<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>
</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)下級目錄
*/
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層代碼
/** *//**
* 函數說(shuō)明：展開(kāi)目錄
* 參數說(shuō)明： 目錄對象
* 返回值：展開(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{ /**//*子結點(diǎn)*/
margin-left:20px; /**//* Left spacing */
padding-left:0px;
}
.tree li{ /**//* 結點(diǎn) */
list-style-type:none;
vertical-align:middle;
}
.tree li a{ /**//* 結點(diǎn)連接 */
color:#000;
text-decoration:none;
font-family:arial;
font-size:0.8em;
padding-left:2px;
} 代碼基本就是這樣了，希望對大家有用。
