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

　　此運用參考了《征服web2.0開發(fā)技術(shù)詳解》的例子。

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

　　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

　　< link rel = " stylesheet " href = " ../css/tree.css " >

　　

　　

　　

　　

　　

　　

　　

　　

　　<% 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 )

　　{

　　填寫下面表單即可預約申請免費試聽java課程!害怕學不會?助教陪讀，隨時解惑!擔心就業(yè)?一地學習，可全國推薦就業(yè)!

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

　　/**

　　* 函數(shù)說明：展開目錄

　　* 參數(shù)說明： 目錄對象

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

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

　　padding-left:0px;

　　}

　　.tree li{ /* 結(jié)點 */

　　list-style-type:none;

　　vertical-align:middle;

　　}

　　.tree li a{ /* 結(jié)點連接 */

　　color:#000;

　　text-decoration:none;

　　font-family:arial;

　　font-size:0.8em;

　　padding-left:2px;

　　}

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