通过读取数据库创建EasyUI左侧二级手风琴菜单

数据库：

create table t_control(
id int primary key auto_increment comment '编号',
title varchar(20) comment '标题',
text varchar(20) comment '节点文本',
iconCls varchar(20) comment '图标',
selected int default 0 comment '是否选中',
url varchar(20) comment '叶节点URL',
pid int default 0 comment '父id'
);

#添加menu数据
insert into t_control(title,iconCls,selected)
  values('系统管理','icon-search',0),
    ('商品管理','icon-search',0),
    ('订单管理','icon-search',0),

#添加tree数据
insert into t_control(text,iconCls,selected,url,pid)
  values('用户管理','icon-search',0,'userManager.jsp',1),
    ('角色管理','icon-search',0,'roleManager.jsp',1),
    ('权限管理','icon-search',0,'functionManager.jsp',1),
    ('分类管理','icon-search',0,'addGoods.jsp',2),
    ('商品管理','icon-search',0,'upGoods.jsp',2),
    ('订单状态','icon-search',0,'indentStat.jsp',3),
    ('订单管理','icon-search',0,'indentManager.jsp',3);

后台java代码：

entity中的实体类：Control.java

package entity;

public class Control {

    private int id;  //编号
    private String title;  //标题
    private String text;  //节点文本
    private String iconCls;  //图标
    private int selected;  //是否选中
    private String url;  //叶节点URL
    private int pid;  //父节点
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getTitle() {
        return title;
    }
    public void setTitle(String title) {
        this.title = title;
    }
    public String getText() {
        return text;
    }
    public void setText(String text) {
        this.text = text;
    }
    public String getIconCls() {
        return iconCls;
    }
    public void setIconCls(String iconCls) {
        this.iconCls = iconCls;
    }
    public int getSelected() {
        return selected;
    }
    public void setSelected(int selected) {
        this.selected = selected;
    }
    public String getUrl() {
        return url;
    }
    public void setUrl(String url) {
        this.url = url;
    }
    public int getPid() {
        return pid;
    }
    public void setPid(int pid) {
        this.pid = pid;
    }
    public Control() {

    }
    public Control(String title, String text, String iconCls, int selected, String url, int pid) {
        super();
        this.title = title;
        this.text = text;
        this.iconCls = iconCls;
        this.selected = selected;
        this.url = url;
        this.pid = pid;
    }
    public Control(int id, String title, String text, String iconCls, int selected, String url, int pid) {
        super();
        this.id = id;
        this.title = title;
        this.text = text;
        this.iconCls = iconCls;
        this.selected = selected;
        this.url = url;
        this.pid = pid;
    }
    @Override
    public String toString() {
        return "Control [id=" + id + ", title=" + title + ", text=" + text + ", iconCls=" + iconCls + ", selected="
                + selected + ", url=" + url + ", pid=" + pid + "]";
    }

}

Dao类：ControlDao.java
写一个普通的dao方法即可，根据pid查询所有数据

package dao;

import java.sql.ResultSet;


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

import dao.RsList.BaseDao;
import entity.Control;

public class ControlDao extends BaseDao<Control>{

    /**
     * 查询所有节点数据
     * @param pid 父id
     * @return
     */
    public List<Control> getControl(int pid) {
        String sql = "select * from t_control where pid="+pid+" ";
        return new BaseDao<Control>().executeQuery(sql, null, new BaseDao.CallBack<Control>() {

            @Override
            public List<Control> forEach(ResultSet rs) throws Exception {
                List<Control> controls = new ArrayList<Control>();
                while(rs.next()) {
                    Control control = new Control(rs.getInt(1),rs.getString(2),rs.getString(3),rs.getString(4),rs.getInt(5),rs.getString(6),rs.getInt(7));
                    controls.add(control);
                }
                return controls;
            }
        });

    }

}

util中连接数据库的类：DBHelper.java

package util;


import java.io.InputStream;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.Properties;

/**
 * 提供了一组获得或关闭数据库对象的方法
 * 
 */
public class DBHelper {
    private static String driver;
    private static String url;
    private static String user;
    private static String password;

    static {// 静态块执行一次，加载 驱动一次
        try {
            InputStream is = DBHelper.class.getResourceAsStream("config.properties");

            Properties properties = new Properties();
            properties.load(is);

            driver = properties.getProperty("driver");
            url = properties.getProperty("url");
            user = properties.getProperty("user");
            password = properties.getProperty("pwd");
            Class.forName(driver);
        } catch (Exception e) {
            e.printStackTrace();
            throw new RuntimeException(e);
        }
    }

    /**
     * 获得数据连接对象
     * 
     * @return
     */
    public static Connection getConnection() {
        try {
            Connection con = DriverManager.getConnection(url, user, password);
            return con;
        } catch (SQLException e) {
            e.printStackTrace();
            throw new RuntimeException(e);
        }
    }

    public static void close(ResultSet rs) {
        if (null != rs) {
            try {
                rs.close();
            } catch (SQLException e) {
                e.printStackTrace();
                throw new RuntimeException(e);
            }
        }
    }

    public static void close(PreparedStatement ps) {
        if (null != ps) {
            try {
                ps.close();
            } catch (SQLException e) {
                e.printStackTrace();
                throw new RuntimeException(e);
            }
        }
    }

    public static void close(Connection con) {
        if (null != con) {
            try {
                con.close();
            } catch (SQLException e) {
                e.printStackTrace();
                throw new RuntimeException(e);
            }
        }
    }

    public static void close(Connection con, PreparedStatement ps, ResultSet rs) {
        close(rs);
        close(ps);
        close(con);
    }

    public static boolean isOracle() {
        return "oracle.jdbc.driver.OracleDriver".equals(driver);
    }

    public static boolean isSQLServer() {
        return "com.microsoft.sqlserver.jdbc.SQLServerDriver".equals(driver);
    }

    public static boolean isMysql() {
        return "com.mysql.jdbc.Driver".equals(driver);
    }

    public static void main(String[] args) {
        Connection con = DBHelper.getConnection();
        DBHelper.close(con);
        System.out.println("isOracle：" + isOracle());
        System.out.println("isSQLServer：" + isSQLServer());
        System.out.println("isMysql：" + isMysql());
        System.out.println("数据库连接(关闭)成功");
    }
}

util中过滤类：EncodingFiter.java

package util;

import java.io.IOException;
import java.util.Iterator;
import java.util.Map;
import java.util.Set;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 中文乱码处理
 * 
 */
public class EncodingFiter implements Filter {

    private String encoding = "UTF-8";// 默认字符集

    public EncodingFiter() {
        super();
    }

    public void destroy() {
    }

    @SuppressWarnings("rawtypes")
    public void doFilter(ServletRequest request, ServletResponse response,
            FilterChain chain) throws IOException, ServletException {
        HttpServletRequest req = (HttpServletRequest) request;
        HttpServletResponse res = (HttpServletResponse) response;

        // 中文处理必须放到 chain.doFilter(request, response)方法前面
        res.setContentType("text/html;charset=" + this.encoding);
        if (req.getMethod().equalsIgnoreCase("post")) {
            req.setCharacterEncoding(this.encoding);
        } else {
            Map map = req.getParameterMap();// 保存所有参数名=参数值(数组)的Map集合
            Set set = map.keySet();// 取出所有参数名
            Iterator it = set.iterator();
            while (it.hasNext()) {
                String name = (String) it.next();
                String[] values = (String[]) map.get(name);// 取出参数值[注：参数值为一个数组]
                for (int i = 0; i < values.length; i++) {
                    values[i] = new String(values[i].getBytes("ISO-8859-1"),
                            this.encoding);
                }
            }
        }

        chain.doFilter(request, response);
    }

    public void init(FilterConfig filterConfig) throws ServletException {
        String s = filterConfig.getInitParameter("encoding");// 读取web.xml文件中配置的字符集
        if (null != s && !s.trim().equals("")) {
            this.encoding = s.trim();
        }
    }

}

配置过滤器：web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <filter>
    <filter-name>encoding</filter-name>
    <filter-class>util.EncodingFiter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>encoding</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
</web-app>

数据库配置文件：config.properties  创建一个后缀properties的文件即可

#mysql
driver=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/book?useUnicode=true&characterEncoding=UTF-8
user=root
pwd=密码

查询数据servlet：ControlServlet.java 使用注解，不需要配置xml

package servlet;

import java.io.IOException;

import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.databind.ObjectMapper;
import dao.ControlDao;
import entity.Control;

@WebServlet(name="control", urlPatterns="/controlServlet")
public class ControlServlet extends HttpServlet{

    /**
     * 手风琴菜单导航读取
     */
    private static final long serialVersionUID = -7466633782057951822L;

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // TODO Auto-generated method stub
        this.doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // TODO Auto-generated method stub
        resp.setContentType("text/html;charset=utf-8");
        //获得Ajax传过来的值
        String pid = req.getParameter("pid");

        List<Control> controlList = new ControlDao().getControl(Integer.parseInt(pid));

        //将集合转换成JSON
        ObjectMapper om = new ObjectMapper();
        String bookJson = om.writeValueAsString(controlList);

        //通过out对象，将JSON响应到前端
        PrintWriter out = resp.getWriter();
        out.print(bookJson);
        out.flush();
        out.close();

    }

}

前端页面代码：

js文件：control.js

$(function(){
    createMenu();
    createTree();
});


//创建分类菜单
function createMenu(){

    $.ajax({
        url:'../controlServlet',  //访问路径
        type:'post',
        data:{'pid':'0'},        //通过Ajax传参
        dataType:'json',
        success:function(data){
            //console.log(data);   //数组
            //遍历JSON对象，在id="menu"的<div>中创建新的分类项<div>
            for(var i=0; i<data.length; i++){
                //取出第一个json对象
                var item = data[i];
                $('#menu').accordion('add', {
                    //为添加的分类项设置属性，属性来来源于json对象
                    title: item.title,                //板块的标题
                    iconCls: item.iconCls,            //板块的图标
                    selected: item.selected,          //是否打开某个模板
                    //为每个分类项添加一个tree的<ul>标签
                    content: '<ul alt="'+item.id+'" name="'+item.title+'" class="easyui-tree"></ul>'
                    //上述代码是在id="menu"的标签中添加多个分类项，每个分类项中添加一个<ul>用于存放tree控件。
                }); 
                //console.log('<ul alt="'+item.id+'" name="'+item.title+'" class="easyui-tree"></ul>');
            }
        }
    });
}

//创建分类菜单项中的树目录
function createTree(){
    $('#menu').accordion({
        //当分类项选中时，将分类项的title和index传递到函数
        onSelect:function(title,index){
            //在jquery中查找<ul>标签中属性name='xxx'的对象，并取出该对象alt属性的值
            //参考：<ul alt="menuItem1" name="系统管理" class="easyui-tree"></ul>
            var id = $("ul[name='"+title+"']").attr("alt");
            //id值为：menuItem1
            //在jquery中查找<ul>标签中属性name='xxx'的对象，并获得该树下所有的根节点
            var nodes = $("ul[name='"+title+"']").tree('getRoots');
            //如果根据节数>0，表示该根节点下已存在数据，返回，不用再添加数据。         
            if(nodes.length>0){
                return;
            }
            //如果根节点下没有数据，添向<ul>中添加数据，数据来源于tree_data.json
            $("ul[name='"+title+"']").tree({
                //请示tree的数据
                url:'../controlServlet?pid='+id+' ',      //展开面板时访问数据的同时将pid传过去
                type:'post',
                lines:false,   //显示树控件上的虚线
                //节点展开事件
                onExpand:function(data){
                    //console.log("onExpand:"+data);
                },
                //节点折叠事件
                onCollapse:function(data){
                    //console.log("onCollapse:"+node);
                },
                //节点选中事件（重点）
                onSelect:function(data){
                    //console.log(data);
                    //判断当前选中节点是否是子节点（叶子节点）
                    if($(this).tree("isLeaf", data.target)){
                        //console.log(node.target);
                        //创建tab标签
                        createTab(data.text, data.iconCls, data.url);
                    }
                }
            });
        }
    });
}




选中Tree组件中的子节点动态创建Tab页签
//假设接收到“用户管理”，"userManage.jsp"
function createTab(text, iconCls, url ){
    var iframe="<iframe frameborder='0' iconCls='"+iconCls+"' src='"+url+"' scrolling='auto' style='width:100%;height:100%;'></iframe>";

    //判断tabs选项卡面板中是否存在一个叫“用户管理”的选项卡，如果存在
    if($('#tab').tabs('exists', text)){
        //就在选中"用户管理"的选项卡    
        $('#tab').tabs('select', text);
    }else{  //不存在，则创建一个新的“用户管理”选项卡

        //在tabs选项卡面板中添加新的选项卡
        $('#tab').tabs('add',{
            //新选项卡的标题
            title:text,
            //注：在动态加载Url页面时，请注意JSP页面中不要包括body/html/head/title/meta等标签
            content:iframe,
            iconCls:iconCls,   //选项卡设置图标
            //href:url,
            closable:true   //选项卡是否显示关闭按钮

        });
    }
}

在后台的首页引用js文件

手风琴菜单导航div

<!-- West -->
        <div region="west" iconCls="icon-caidan" split="false" title="导航菜单" style="width:180px" id="west">
            <div id="menu" class="easyui-accordion" data-options="animate:true,border:false,fit:true">
                <!-- 导航内容 -->
            </div>
        </div>

这是数据库没开的效果

这是开了数据库的效果