js控制树型菜单

  其实我的也不是全部的用js控制,其中还包含了jsp的列表查询 ,把查询出来的数据按照树型结构显示,看以前写的代码,很乱,脑袋都大了还是没弄出个所以然来.又从网上找出些例子,一步一步的搞.我对js实在是不熟悉,看起来就头疼,不过没办法,也只能硬着头皮去做.总算是实现了这个小小的功能.拿出来大家分享一下,高手就不要看了,没什么技术含量.

我写的是一个标签类,一些查询方法就不写了,那样就太多了

这是标签类,里面是查询的结果,并添加类一些图片,实在也没什么

 package com.caexpo.taglib;
import java.io.IOException;
import java.sql.SQLException;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.jsp.tagext.TagSupport;
import javax.servlet.jsp.JspException;
import javax.servlet.jsp.JspWriter;

import com.caexpo.model.WcmCureinfo;
import com.caexpo.dao.WcmAreaclassDAO;
import com.caexpo.dao.WcmCureinfoDAO;
import com.caexpo.dao.WcmAreaclassDAO;
import com.caexpo.dao.WcmInfoclassDAO;
import com.caexpo.model.WcmAreaclass;
import com.caexpo.model.WcmInfoclass;
import com.wcms.datebase.GetPool;
import com.wcms.util.LeftTree;

public class Menutree extends TagSupport {
public int doStartTag() throws JspException {
  
  HttpServletRequest request = (HttpServletRequest)pageContext.getRequest();
  try{
   JspWriter out = pageContext.getOut();
   out.print(Menutree().toString());
  }catch(IOException ex)
  {
   ex.getStackTrace();
  }
  
  return SKIP_BODY;
 }
 public String Menutree()
 {
  
  LeftTree lTree = new LeftTree();
  StringBuffer stbTable = new StringBuffer();
  try {
    WcmAreaclassDAO wad = WcmAreaclassDAO.getInstance();
    WcmInfoclassDAO wid = WcmInfoclassDAO.getInstance();
    WcmAreaclass wac = new WcmAreaclass();
    WcmInfoclass wic = new WcmInfoclass();
   
    String iStr = "<IMG align=absMiddle border=0 height=20 src='images/I.gif' width=19>";
    String oStr = "<IMG align=absMiddle border=0 height=20 src='images/O.gif' width=19>";
    
    String sql2 = "from WcmAreaclass ";
    String sql3 = "from WcmInfoclass t where  length(t.infoclassid)<3 order by t.infoclassid asc";
    
    List arealist1 = wad.searchInfoByHql(sql2);
    List infolist1 = wid.searchBySql(sql3);
    

    
    String classname="";
    StringBuffer sb =new StringBuffer(); 
    
    ///循环区域类。得到的值加入到stringBuffer
    for(int k=0;k<arealist1.size();k++)
    {
     wac = (WcmAreaclass)arealist1.get(k);
     classname=wac.getAreaclassname();
     sb.append("<tr><td>"+iStr );
  //   sb.append("&nbsp;");
     ///当取到最后一个值时，添加的图片改变
     if(k==arealist1.size()-1)
     {sb.append("<IMG align=absMiddle border=0 height=20 src='images/L.gif' width=19>");}
     else{
     sb.append("<IMG align=absMiddle border=0 height=20 src='images/T.gif' width=19>");}
     sb.append("<IMG align=absMiddle src='images/item1.gif' style='MARGIN-RIGHT: 5px'>");
     
//     sb.append("<IMG align=absMiddle border=0 id=me Tree src='images/Tplus.gif'>");
     sb.append("<A class=treestyle href='#' target=mainFrame ");
     sb.append("title=''><FONT id=Title>");
     sb.append(classname+"</FONT></A></td></tr>");
    }
    
    ///添加信息的头部并打印出来
    stbTable.append("<DIV >");
    stbTable.append("<DIV id=Title >");
    stbTable.append("<IMG align=absMiddle border=0 id=mmFolder src='images/home.gif' style='MARGIN-RIGHT: 5px'>");
    stbTable.append("<FONT class=treestyle id=mTitle >" + "信息管理"+ "</FONT>");
    stbTable.append("</DIV>");
    
  //  stbTable.append("<DIV id=Child style='DISPLAY: block'>");
    ///循环类别，判断当有子类别的时候展开数
     for(int i=0;i<infolist1.size();i++)
     {
      wic = (WcmInfoclass)infolist1.get(i);
      String infoclassname = wic.getInfoclassname();
      String classid=wic.getInfoclassid();
      //System.out.println("classid="+classid);
            stbTable.append("<DIV id=Parent>");
            stbTable.append("<A class=treestyle id=a οnclick=mExpandIE(Child"+classid+",'last',Tree"+classid+",Folder"+classid+") target=_self>");
               stbTable.append("<IMG align=absMiddle border=0 id=Tree"+classid+" src='images/Tplus.gif'>");
            stbTable.append("<IMG align=absMiddle border=0 id=Folder"+classid+"  src='images/folder3.gif' style='MARGIN-RIGHT: 5px'>");
            stbTable.append("<font id=last style='cursor:hand;padding:1px'>");
            stbTable.append(infoclassname +"</font></A></DIV>");
                   
            stbTable.append("<DIV id=Child"+classid+" style='DISPLAY: none'>");
            stbTable.append("<table>");
            stbTable.append(sb+"</table>");
            stbTable.append("</DIV>");
                }
      stbTable.append("</DIV>");
    } catch(Exception ex)
    {
     System.out.println(ex.getMessage());
    }
                     
          return stbTable.toString();
      }

}
在就是下面的一个js,别看短我可是想了很长时间才完成的,主要难点就是控制图片转换上

主要是学习,自己还要加一些东西才能跑通

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="/WEB-INF/tag.tld" prefix="s"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>

  <title>My JSP 'DayUp.jsp' starting page</title>
  <SCRIPT language=javascript>

 
 function mExpandIE(obj1,obj2,obj3,obj4) {

var child;
 var ExpandChild = eval(obj1 );
    if (obj2 != "top") {
  ExpandTree = eval(obj3 );
  ExpandFolder = eval( obj4 );
 }
 
 if (ExpandChild.style.display == "none") {
  ExpandChild.style.display = "block";
       
            if (obj2 == "last")
            { ExpandTree.src = "images/Lminus.gif"; }
   else { ExpandTree.src = "images/Tminus.gif"; }
   ExpandFolder.src = "images/openfolder3.gif"; 
  
 
 }else{
  ExpandChild.style.display = "none";
       
         if (obj2 == "last")
          { ExpandTree.src = "images/Lplus.gif"; }
   else { ExpandTree.src = "images/Tplus.gif"; }
   ExpandFolder.src = "images/folder3.gif";
  
  
 }
}
 
 </SCRIPT>

 </head>

 <body>
  标签:
  <br>
  <s:Menutree />

 </body>
</html>