java

导航

运用ajax技术的树型菜单

来源 :中华考试网 2020-11-27

  树型菜单可以说是项目中应用最为广泛的运用。以前无论使用微软控件的树型,还是比较优秀的阿赖树型,都是将数据全部读出,然后再分级显示。这样如果数据量大,那么第 一次显示将需要客户等待很长一段时间,降低了客户的体验度。如今使用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 " >

  

  

  

  

  

  

  

  

      <% 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课程!害怕学不会?助教陪读,随时解惑!担心就业?一地学习,可全国推荐就业!

  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="https://www.examw.com/../images/tree_plus.gif";

  }else{

  images[0].src="https://www.examw.com/../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;

      }

      代码基本就是这样了,希望对大家有用。

  • 分享到

    您可能感兴趣的文章