运用ajax技术的树型菜单

来源：百度文库 编辑：神马文学网 时间：2024/04/19 20:50:44
运用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
< 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;
    }





  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;
    }
代码基本就是这样了，希望对大家有用。
运用ajax技术的树型菜单 运用ajax技术的树型菜单 运用ajax技术的树型菜单1 Ajax背后的技术 AutoCAD菜单的开发技术 八极拳的技术运用 AJAX开发者的最新工具和技术 基于JSON的高级AJAX开发技术 展示几个使用Ajax技术的站点 使用AJAX技术的十大理由 Ajax技术对搜索引擎优化的影响 使用AJAX技术的十大理由 基于JSON的高级AJAX开发技术 Ajax 技术汇总 Ajax 技术汇总 Ajax 技术汇总 Ajax 技术简介(2) Ajax 技术资源中心 AJAX技术汇总 --cogito AJAX技术汇总 --cogito Ajax技术简介 AJAX网络开发技术 Ajax 技术入门简介 AJAX技术汇总