运用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 " >
< script type = " text/javascript "  src = " ../js/tree_ajax.js " ></ script >
< 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、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();
    }
 
阅读更多
换一批

没有更多推荐了,返回首页