EasyUI（使用Oracle创建树形菜单）

目录：

一：创建数据库（这里用的是Oracle）

二：写方法

注：我上篇文章用的是json虚拟数据，这篇文章我来教大家用Oracle创建树形菜单

一：创建数据库

创建表以及插入语句

创建之后查询的表  SELECT * FROM t_module

导入jar包

 注：js文件夹中导入的是EasyUI库、插件、css样式,具体操作请看上篇文章

二：写方法

   包的结构：

具体代码：

DBHelper

package com.zking.euidemo.util;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

public class DBHelper {
	//两个静态常量
	private static final String URL="jdbc:oracle:thin:@localhost:1521:orcl";
	private static final String CNAME="oracle.jdbc.driver.OracleDriver";
	
	/**
	 * 加载驱动   只有在类被加载到内存中的时候，执行一次，之后就不在执行
	 */
	static {
		try {
			Class.forName(CNAME);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	
	/**
	 * 创建连接
	 * @return 连接
	 */
	public static Connection getCon() {
		Connection con=null;
		try {
			con=DriverManager.getConnection(URL, "scott", "tiger");
		} catch (Exception e) {
			e.printStackTrace();
		}
		return con;
	}
	
	/**
	 * 关闭资源
	 * @param con 连接
	 * @param ps  执行对象
	 * @param rs  结果集
	 */
	public static void myClose(Connection con,PreparedStatement ps,ResultSet rs) {
		try {
			if(rs!=null){
				rs.close();
			}
			if(ps!=null){
				ps.close();
			}
			if(con!=null&&!con.isClosed()){
				con.close();
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

Module(实体类) 

package com.zking.euidemo.entity;

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

public class Module {
	private Integer id;//这里用int类型也可以，但要注意数据库里数据，因为int类型没有值是0,Integer是null,所以为避免出现空值，出现0的情况下，你数据库也有0导致出问题，这里最好用Integer
	private Integer pid;
	private String text;
	private String icon;
	private String url;
	private int sort;
	
	private List<Module> children=new ArrayList<>();
	
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public Integer getPid() {
		return pid;
	}
	public void setPid(Integer pid) {
		this.pid = pid;
	}
	public String getText() {
		return text;
	}
	public void setText(String text) {
		this.text = text;
	}
	public String getIcon() {
		return icon;
	}
	public void setIcon(String icon) {
		this.icon = icon;
	}
	public String getUrl() {
		return url;
	}
	public void setUrl(String url) {
		this.url = url;
	}
	public int getSort() {
		return sort;
	}
	public void setSort(int sort) {
		this.sort = sort;
	}
	public List<Module> getChildren() {
		return children;
	}
	public void setChildren(List<Module> children) {
		this.children = children;
	}
	@Override
	public String toString() {
		return "Module [id=" + id + ", pid=" + pid + ", text=" + text + ", icon=" + icon + ", url=" + url + ", sort="
				+ sort + "]";
	}
}

dao方法：

IModuleDao   实现一个接口

package com.zking.euidemo.dao;

import java.util.List;

import com.zking.euidemo.entity.Module;


public interface IModuleDao {
	/**
	 * 单个查询
	 * @param pid 
	 * @return
	 */
	public List<Module> listModel(int pid);

	
}

 ModuleDao 

package com.zking.euidemo.dao;

import java.sql.Connection;

import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import com.zking.euidemo.entity.Module;
import com.zking.euidemo.util.DBHelper;

public class ModuleDao implements IModuleDao{
	
	@Override
	public List<Module> listModel(int pid) {
		List<Module> list = new ArrayList<>();
		Connection con = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		try {
			String sql = "select id,pid,text,icon,url,sort from t_module where pid=? order by sort";
			con = DBHelper.getCon();
			ps = con.prepareStatement(sql);
			ps.setInt(1, pid);
			rs = ps.executeQuery();
			
			while(rs.next()) {
				Module m = new Module();
				m.setId(rs.getInt("id"));
				m.setPid(rs.getInt("pid"));
				m.setText(rs.getString("text"));
				m.setUrl(rs.getString("url"));
				m.setSort(rs.getInt("sort"));
				list.add(m);
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			DBHelper.myClose(con, ps, rs);
		}
		
		return list;
	}
	
	
	public static void main(String[] args) {
		ModuleDao dao = new ModuleDao();
		List<Module> list = dao.listModel(21);
		list.forEach(t->System.out.println(t));
	}

}

service(另一种写法：biz)服务层(业务逻辑层) 

IModuleServlce

package com.zking.euidemo.service;

import java.util.List;

import com.zking.euidemo.entity.Module;

public interface IModuleServlce {
	/**
	 * 单个查询
	 * @param pid 
	 * @return
	 */
	public List<Module> listModel(int pid);
}

 ModuleServlce

package com.zking.euidemo.service;

import java.util.List;

import com.zking.euidemo.dao.IModuleDao;
import com.zking.euidemo.dao.ModuleDao;
import com.zking.euidemo.entity.Module;

public class ModuleServlce implements IModuleServlce{
	private IModuleDao dao = new ModuleDao();

	@Override
	public List<Module> listModel(int pid) {
		
		List<Module> list = dao.listModel(pid);
		//递归
		for(Module m: list) {
			if(m.getUrl() == null || "".equals(m.getUrl().trim())) {
				m.setChildren(listModel(m.getId()));
			}
		}
		
		return list;
	}
	
	
	public static void main(String[] args) {
		IModuleServlce service = new ModuleServlce();
		List<Module> list = service.listModel(-1);
		list.forEach(t->System.out.println(t));
	}

}

注：梯归必须要用结束条件，因为我们数据中有父菜单有一列url是为空的,所以我们可以用来判断url为空就跳，不为空就直接返回,如果没有写梯归的结束条件就会报SOF 方法堆栈异常 OOM ,内存堆溢出

Servlet(控制器)

ModuleServlet

package com.zking.euidemo.servlet;


import java.io.IOException;

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

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

import com.alibaba.fastjson.JSON;
import com.zking.euidemo.entity.Module;
import com.zking.euidemo.service.IModuleServlce;
import com.zking.euidemo.service.ModuleServlce;

@WebServlet("/moduleServlet")//相当于配置和映射 不用写web.xml了
public class ModuleServlet extends HttpServlet {

	private IModuleServlce service = new ModuleServlce();

	public void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {
		doPost(req, resp);
	}

	public void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {

		req.setCharacterEncoding("utf-8");
		resp.setContentType("application/json; charset=utf-8");
		List<Module> list = service.listModel(-1);
		PrintWriter out = resp.getWriter();
		
		//将list对象转换为json格式
		String str = JSON.toJSONString(list);

		out.write(str);
		out.flush();//刷新
		out.close();//关闭
	}
}

 index.jsp界面,在上一篇的基础上写的，只要把树数据请求地址改成跟控制器Servlet配置映射的一致即可

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%@include file="common/head.jsp" %>
<script type="text/javascript">
$(function(){
	$("#funcTree").tree({
		 //ctx是上下文参数，作为绝对路径使用
		url : ctx + '/moduleServlet',//树数据的请求地址
        //双击事件
		onDblClick:function(node){
			 //判重，如果为false就添加新的tab页
			if(!$("#tt").tabs("exists",node.text)){
				// add a new tab panel    
				$('#tt').tabs('add',{    
				    title:node.text,    
				    content:node.text,    
				    closable:true    
				});  
			}else{
				//反之为true，选择一个选项卡面板
				$("#tt").tabs("select",node.text)
			}
		}
	});
})
</script>
</head>
<body class="easyui-layout">   
    <div data-options="region:'north',split:true" style="height:100px;"></div>   
    <div data-options="region:'west',title:'功能导航',split:true" style="width:150px;">
		<ul id="funcTree" class="easyui-tree"></ul>  
    </div>   
    <div data-options="region:'center'" style="padding:5px;background:#eee;">
    	
		    <div id="tt" class="easyui-tabs" style="width:100%;height:100%;">   
		    <div title="首页" style="padding:20px;display:none;">   
		        	首页    
		    </div>   
			</div>  
    	
    </div>   
	<div data-options="region:'south',split:true" style=" text-align:center;height:30px;background: #E0ECFF" class="panel-title">
    	Copyright@XXXX有限责任公司
    </div>
</body>
</html>

效果图：

 好了，我的分享到此结束，希望能对大家有所帮助，谢谢！！