页面左侧可收缩菜单案例

思维导图：

页面效果：

思维导图的事项，有些可以并行有些要串行，视情况而定，做完一部分测试一部分，慢慢来。

1.创建数据库：

 create database menudemo; 

2.创建表：

CREATE TABLE menu (
  id int(11) NOT NULL auto_increment,
  linkURL varchar(255) default NULL,
  menuName varchar(255) default NULL,
  parent_id int(11) default NULL,
  PRIMARY KEY  (id),
  KEY FK33155F9A1787B5 (parent_id),
  CONSTRAINT FK33155F9A1787B5 FOREIGN KEY (parent_id) REFERENCES menu (id)
)

好吧，其实这是hibernate自动生成的。id,linkURL,menuName,parent_id这些基本字段，再加上 parent_id 和 id的外键映射。

测试数据后面自动生成。

3.导入hibernate框架，本次用的是hiberante 3.3.2版本,具体过程：

　　1）先加入hibernate3.jar、required 下面的jar包

　　2) 再加入 annotation 下的包：hibernate-annotations.jar、ejb3-persistence.jar、hibernate-commons-annotations.jar

　　3）为了看输出的SQL语句：加入log4j、slf4j-log4j12-1.5.8.jar、log4j.properties

　　4）数据库驱动

　　5）新建 hibernate.cfg.xml,从api中考进来，改改配置（connection,方言，show_sql,ddlhbm）

　　6) 新建一个 pojo ，测试一下是否能生成表了，成功就可以了。

4.编写Menu 类、配置树状映射：

Menu:one-to-many FetchType 设为 EAGER，不然json数据生成由于懒加载会出问题

package com.shawn.bean;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

import javax.persistence.CascadeType;
import javax.persistence.Entity;
import javax.persistence.FetchType;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.JoinColumn;
import javax.persistence.ManyToOne;
import javax.persistence.OneToMany;
import javax.persistence.Table;

@Entity
@Table(name="menu")
public class Menu implements Serializable{
    
    private static final long serialVersionUID = -7798302038641404427L;

    private Integer id;
    
    //菜单名
    private String menuName;
    
    //链接URL
    private String linkURL;
    
    //子节点（Menu集合）
    private List<Menu> children = new ArrayList<Menu>();
    
    //父节点（Menu）
    private transient Menu parent;

    @Id
    @GeneratedValue
    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getMenuName() {
        return menuName;
    }

    public void setMenuName(String menuName) {
        this.menuName = menuName;
    }

    @OneToMany(cascade=CascadeType.ALL,mappedBy="parent",fetch=FetchType.EAGER)
    public List<Menu> getChildren() {
        return children;
    }

    public void setChildren(List<Menu> children) {
        this.children = children;
    }

    @ManyToOne(fetch=FetchType.EAGER)
    @JoinColumn(name="parent_id")
    public Menu getParent() {
        return parent;
    }

    public void setParent(Menu parent) {
        this.parent = parent;
    }

    public String getLinkURL() {
        return linkURL;
    }

    public void setLinkURL(String linkURL) {
        this.linkURL = linkURL;
    }
    
}

5.造测试数据，测试bean

测试类：

package com.shawn.bean;

import java.util.ArrayList;

import org.hibernate.Query;
import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.hibernate.cfg.AnnotationConfiguration;
import org.hibernate.tool.hbm2ddl.SchemaExport;
import org.junit.After;
import org.junit.Before;
import org.junit.Test;

public class MenuTest {
    private static SessionFactory sf = null;
    
    @Before
    public void before(){
        sf = new AnnotationConfiguration().configure().buildSessionFactory();
    }
    
    @After
    public void after(){
        if(sf != null){
            sf.close();
        }
    }
    
    @Test
    public void testSchemaExport(){
        new SchemaExport(new AnnotationConfiguration().configure()).create(false, true);
    }
    
    @Test
    public void testMenuSave(){
        
        /*=========================日常管理=========================*/
        
        Menu richang = new Menu();//日常管理
        richang.setParent(null);
        richang.setMenuName("日常管理");
        richang.setLinkURL(null);
        
        Menu huiyi = new Menu();//会议管理
        huiyi.setParent(richang);
        huiyi.setMenuName("会议管理");
        huiyi.setLinkURL("pages/richang/metting_index.jsp");
        
        Menu gonggao = new Menu();//公告管理
        gonggao.setParent(richang);
        gonggao.setMenuName("公告管理");
        gonggao.setLinkURL("pages/richang/bbc_index.jsp");
        
        richang.getChildren().add(huiyi);
        richang.getChildren().add(gonggao);
        
        /*=========================考勤管理=========================*/
        
        Menu kaoqing = new Menu();//考勤管理
        kaoqing.setParent(null);
        kaoqing.setMenuName("考勤管理");
        kaoqing.setLinkURL(null);
        
        Menu waichu = new Menu();
        waichu.setParent(kaoqing);
        waichu.setMenuName("外出登记");
        waichu.setLinkURL("pages/kaoqing/waichu.jsp");
        
        Menu qingjia = new Menu();
        qingjia.setParent(kaoqing);
        qingjia.setMenuName("请假登记");
        qingjia.setLinkURL("pages/kaoqing/qingjia.jsp");
        
        Menu chuchai = new Menu();
        chuchai.setParent(kaoqing);
        chuchai.setMenuName("出差登记");
        chuchai.setLinkURL("pages/kaoqing/chuchai.jsp");
        
        Menu shangxiaban = new Menu();
        shangxiaban.setParent(kaoqing);
        shangxiaban.setMenuName("上下班登记");
        shangxiaban.setLinkURL("pages/kaoqing/shangxiaban.jsp");
        
        Menu shangban = new Menu();//上班登记
        shangban.setParent(shangxiaban);
        shangban.setMenuName("上班登记");
        shangban.setLinkURL("pages/kaoqing/shangban.jsp");
        
        Menu xiaban = new Menu();//下班登记
        xiaban.setParent(shangxiaban);
        xiaban.setMenuName("下班登记");
        xiaban.setLinkURL("pages/kaoqing/xiaban.jsp");
        
        shangxiaban.getChildren().add(shangban);
        shangxiaban.getChildren().add(xiaban);
        
        kaoqing.getChildren().add(waichu);
        kaoqing.getChildren().add(qingjia);
        kaoqing.getChildren().add(chuchai);
        kaoqing.getChildren().add(shangxiaban);
        /*=========================计划制定=========================*/
        
        Menu jihua = new Menu();//计划制定
        jihua.setParent(null);
        jihua.setMenuName("计划制定");
        jihua.setLinkURL(null);
        
        Menu qiyePlan = new Menu();
        qiyePlan.setParent(jihua);
        qiyePlan.setMenuName("企业计划");
        qiyePlan.setLinkURL("pages/jihua/qiyePlan.jsp");
        
        Menu bumenPlan = new Menu();
        bumenPlan.setParent(jihua);
        bumenPlan.setMenuName("部门计划");
        bumenPlan.setLinkURL("pages/jihua/bumenPlan.jsp");
        
        Menu gerenPlan = new Menu();
        gerenPlan.setParent(jihua);
        gerenPlan.setMenuName("个人计划");
        gerenPlan.setLinkURL("pages/jihua/gerenPlan.jsp");
        
        jihua.getChildren().add(qiyePlan);
        jihua.getChildren().add(bumenPlan);
        jihua.getChildren().add(gerenPlan);
        /*=========================审核管理=========================*/
        
        Menu shenhe = new Menu();//审核管理
        shenhe.setParent(null);
        shenhe.setMenuName("审核管理");
        shenhe.setLinkURL(null);
        
        Menu fbApply = new Menu();
        fbApply.setParent(shenhe);
        fbApply.setMenuName("发布申请");
        fbApply.setLinkURL("pages/shenhe/fbApply.jsp");
        
        Menu shenheApply = new Menu();
        shenheApply.setParent(shenhe);
        shenheApply.setMenuName("审核批示");
        shenheApply.setLinkURL("pages/shenhe/shenheApply.jsp");
        
        shenhe.getChildren().add(fbApply);
        shenhe.getChildren().add(shenheApply);
        
        /*=========================员工管理=========================*/
        
        Menu memManage = new Menu();//员工管理
        memManage.setParent(null);
        memManage.setMenuName("员工管理");
        memManage.setLinkURL(null);
        
        Menu memAdd = new Menu();
        memAdd.setParent(memManage);
        memAdd.setMenuName("员工添加");
        memAdd.setLinkURL("pages/yuangong/memAdd.jsp");
        
        Menu memUpdate = new Menu();
        memUpdate.setParent(memManage);
        memUpdate.setMenuName("员工维护");
        memUpdate.setLinkURL("pages/yuangong/memUpdate.jsp");
        
        memManage.getChildren().add(memAdd);
        memManage.getChildren().add(memUpdate);
        
        /*=========================通讯管理=========================*/
        
        Menu tongxun = new Menu();//通讯管理
        tongxun.setParent(null);
        tongxun.setMenuName("通讯管理");
        tongxun.setLinkURL(null);
        
        Menu tongxun_xianshi = new Menu();
        tongxun_xianshi.setParent(tongxun);
        tongxun_xianshi.setMenuName("显示通讯组");
        tongxun_xianshi.setLinkURL("pages/tongxun/tongxun_xianshi.jsp");
        
        Menu tongxun_tianjia = new Menu();
        tongxun_tianjia.setParent(tongxun);
        tongxun_tianjia.setMenuName("增加通讯详细信息");
        tongxun_tianjia.setLinkURL("pages/tongxun/tongxun_add.jsp");
        
        tongxun.getChildren().add(tongxun_xianshi);
        tongxun.getChildren().add(tongxun_tianjia);
        
        Session session = sf.getCurrentSession();
        session.beginTransaction();
        
        session.save(richang);
        session.save(kaoqing);
        session.save(jihua);
        session.save(shenhe);
        session.save(memManage);
        session.save(tongxun);
        
        session.getTransaction().commit();
    }
    
    @Test
    public void testLoad(){
        
        Session session = sf.getCurrentSession();
        session.beginTransaction();
        Query query = session.createQuery("from Menu t where t.parent.id is null");
        //递归输出所有节点
        ArrayList<Menu> list = (ArrayList<Menu>)query.list();
        for(Menu menu : list){
            System.out.println(menu.getMenuName());
            print(menu,0);
        }
        session.getTransaction().commit();
    }
    
    //输出方法
    private void print(Menu menu,int level) {
        String preStr = "";
        for(int i=0;i<level;i++){
            preStr += "----|";
        }
        
        System.out.println(preStr + menu.getMenuName());
        for(Menu m:menu.getChildren()){
            //如果有子节点，则继续往下递归
            print(m,level+1);
        }
    }
}

造好数据，插入。

6.编写DAO类，用HQL查询，返回List<Menu>，获取所有的一级菜单，由于是FetchType.EAGER，所以所有数据是连根拔起了。

DAO类：

package com.shawn.dao;

import java.util.ArrayList;
import java.util.List;

import org.hibernate.Query;
import org.hibernate.Session;

import com.shawn.bean.Menu;

public class MenuDAO {
    
    @SuppressWarnings("unchecked")
    public List<Menu> getAllMenu(Session session){
        List<Menu> list = null;
        Query query = session.createQuery("from Menu t where t.parent.id is null");
        list = (ArrayList<Menu>)query.list();
        return list;
    }
    
}

7.Service 类：

package com.shawn.service;

import java.lang.reflect.Type;
import java.util.List;

import org.hibernate.Session;
import org.hibernate.SessionFactory;

import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
import com.google.gson.reflect.TypeToken;
import com.shawn.bean.Menu;
import com.shawn.dao.MenuDAO;
import com.shawn.util.HibernateUtil;

public class GetMenuService {
    
    public List<Menu> getMenu(){
        List<Menu> menus = null;
        SessionFactory sf = HibernateUtil.getSessionFactory();
        Session session = sf.getCurrentSession();
        session.beginTransaction();
        
        MenuDAO dao = new MenuDAO();
        menus = dao.getAllMenu(session);
//        Gson gson = new GsonBuilder().setPrettyPrinting().create();
//        Type complexType = new TypeToken<List<Menu>>() {}.getType();
//        String reljson = gson.toJson(menus,complexType);
//        System.out.println(reljson);
        session.getTransaction().commit();
        return menus;
    }
    
}

9.导入 Struts1,这里不再详述。

　　Action 类：

package com.shawn.action;

import java.lang.reflect.Type;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;

import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
import com.google.gson.reflect.TypeToken;
import com.shawn.bean.Menu;
import com.shawn.service.GetMenuService;

public class IndexAction extends Action {
    
    @Override
    public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request,
            HttpServletResponse response) throws Exception {
        GetMenuService service = new GetMenuService();
        //获取菜单列表
        Gson gson = new GsonBuilder().setPrettyPrinting().create();
        Type complexType = new TypeToken<List<Menu>>() {}.getType();
        List<Menu> menus = service.getMenu();
        String reljson = gson.toJson(menus,complexType);
        System.out.println(reljson);
        request.getSession().setAttribute("menusJson", reljson);
        return mapping.findForward("main");
    }
    
}

　　Struts-config.xml:

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE struts-config PUBLIC
          "-//Apache Software Foundation//DTD Struts Configuration 1.3//EN"
          "http://struts.apache.org/dtds/struts-config_1_3.dtd">

<struts-config>


    <form-beans>
    </form-beans>

<!-- =========================================== Global Forward Definitions -->

    <global-forwards>
        <!-- Default forward to "Welcome" action -->
        <!-- Demonstrates using index.jsp to forward -->
        <forward
            name="welcome"
            path="/Welcome.do"/>
    </global-forwards>


<!-- =========================================== Action Mapping Definitions -->

    <action-mappings>
            <!-- Default "Welcome" action -->
            <!-- Forwards to Welcome.jsp -->
        <action
            path="/Welcome"
            forward="/pages/Welcome.jsp"/>
            
        <action path="/index" type="com.shawn.action.IndexAction">
            <forward name="main" path="/pages/default.jsp" redirect="false"/>
        </action>

    <!-- sample input and input submit actions

        <action
            path="/Input"
            type="org.apache.struts.actions.ForwardAction"
            parameter="/pages/Input.jsp"/>

        <action
            path="/InputSubmit"
            type="app.InputAction"
            name="inputForm"
            scope="request"
            validate="true"
            input="/pages/Input.jsp"/>

            <action
                path="/edit*"
                type="app.Edit{1}Action"
                name="inputForm"
                scope="request"
                validate="true"
                input="/pages/Edit{1}.jsp"/>

    end samples -->
    </action-mappings>

</struts-config>

10.编写JSP页面（主页用frameset布局，这里贴出主要的left.jsp页面）

　　left.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.List,java.util.ArrayList,com.shawn.bean.Menu" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<base href="<%=basePath %>"/>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首頁</title>
<link style="text/css" href="css/common.css" rel="stylesheet"/>
<style type="text/css">
.menuTree{ margin-left:-30px;}
.menuTree div{ padding-left:30px;}
.menuTree div ul{ overflow:hidden; display:none; height:auto;}
.menuTree span{ display:block; height:25px; line-height:25px; padding-left:5px; margin:1px 0; cursor:pointer; border-bottom:1px solid #CCC;}
.menuTree span:hover{ background-color:#e6e6e6; color:#cf0404;}
.menuTree a{ color:#333; text-decoration:none;}
.menuTree a:hover{ color:#06F;}
.btn{ height:30px; margin-top:10px; border-bottom:1px solid #CCC;}
</style>
<script type="text/javascript" src="lib/jquery-1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="btn">
<input name="" type="button" id="btn_open" value="全部展开" />&nbsp;&nbsp;
<input name="" type="button" id="btn_close" value="全部收缩" />
</div>
<div id="menuTree" class="menuTree"></div>
</body>
<script type="text/javascript">
<%
    String menusJson = (String)session.getAttribute("menusJson");
%>
 var json = <%=menusJson%>;
/*递归实现获取无级树数据并生成DOM结构*/
var str = "";
var forTree = function(o){
 for(var i=0;i<o.length;i++){
 var urlstr = "";
 try{
 if(typeof o[i]["linkURL"] == "undefined"){
 urlstr = "<div><span>"+ o[i]["menuName"] +"</span><ul>";
 }else{
 urlstr = "<div><span><a href='"+ o[i]["linkURL"] +"' target='right'>"+ o[i]["menuName"] +"</a></span><ul>"; 
 }
 str += urlstr;
 if(o[i]["children"] != null && o[i]["children"] != ""){
 forTree(o[i]["children"]);
 }
 str += "</ul></div>";
 }catch(e){}
 }
 return str;
}
/*添加无级树*/
document.getElementById("menuTree").innerHTML = forTree(json);
/*树形菜单*/
var menuTree = function(){
     //给有子对象的元素加[+-]
     $("#menuTree ul").each(function(index, element) {
         var ulContent = $(element).html();
         var spanContent = $(element).siblings("span").html();
         if(ulContent){
             $(element).siblings("span").html("[+] " + spanContent);
         }
     });
     
     $("#menuTree").find("div span").click(function(){
         var ul = $(this).siblings("ul");
         var spanStr = $(this).html();
         var spanContent = spanStr.substr(3,spanStr.length);
         if(ul.find("div").html() != null){
             if(ul.css("display") == "none"){
                 ul.show(300);
                 $(this).html("[-] " + spanContent);
             }else{
                 ul.hide(300);
                 $(this).html("[+] " + spanContent);
             }
         }
     })
}()

/*展开*/
$("#btn_open").click(function(){
 $("#menuTree ul").show(300);
 curzt("-");
})
/*收缩*/
$("#btn_close").click(function(){
 $("#menuTree ul").hide(300);
 curzt("+");
})
function curzt(v){
 $("#menuTree span").each(function(index, element) {
 var ul = $(this).siblings("ul");
 var spanStr = $(this).html();
 var spanContent = spanStr.substr(3,spanStr.length);
 if(ul.find("div").html() != null){
 $(this).html("["+ v +"] " + spanContent);
 }
 }); 
}
</script>
</html>

效果就是前面的图。

代码链接: https://pan.baidu.com/s/1cAKzmu 密码: qp5v