EasyUI(使用Oracle创建树形菜单)

目录

一、创建数据库

二 、写方法

---

一、创建数据库

  sql语句：

CREATE TABLE t_module  (
  id integer DEFAULT NULL,
  pid integer DEFAULT NULL,
  text VARCHAR(150) DEFAULT NULL,
  icon VARCHAR(90) DEFAULT NULL,
  url VARCHAR(180) DEFAULT NULL,
  sort integer DEFAULT NULL
);

INSERT INTO t_module VALUES (20, -1, '订单管理', NULL, '', 2);
INSERT INTO t_module VALUES (2001, 20, '订单管理', NULL, '/orderList.jsp', 6);
INSERT INTO t_module VALUES (2002, 20, '订单统计', NULL, '/orderStatistics.jsp', 7);
INSERT INTO t_module VALUES (21, -1, '系统管理', NULL, '', 3);
INSERT INTO t_module VALUES (2101, 21, '用户管理', NULL, 'jsp/system/userManage.jsp', 8);
INSERT INTO t_module VALUES (2102, 21, '权限管理', NULL, 'jsp/system/authManage.jsp', 10);
INSERT INTO t_module VALUES (2103, 21, '字典管理', NULL, '/dictList.jsp', 11);
INSERT INTO t_module VALUES (22, -1, '书本管理', NULL, '', 1);
INSERT INTO t_module VALUES (2201, 22, '新增书本', NULL, 'jsp/book/addBook.jsp', 4);
INSERT INTO t_module VALUES (2202, 22, '书本管理', NULL, 'jsp/book/bookList.jsp', 5);

二 、写方法

DBHelper：

public class DBHelper {

	private static final String cname="oracle.jdbc.driver.OracleDriver";
	private static final String url="jdbc:oracle:thin:localhost:1521:orcl";
	

	static {
		try {
			
			Class.forName(cname);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	

	public static Connection getsCon() {
		Connection con = null;
		try {
			con = DriverManager.getConnection(url,"scott","tiger");
		} catch (Exception e) {
			e.printStackTrace();
		}
		return con;
		
	}

	public static void Close(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：

public class Module {
	
	private Integer id;
	
	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方法：

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=?";
			con = DBHelper.getsCon();
			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) {
			
		} finally {
			DBHelper.Close(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：

public class ModuleService implements IModuleService {
	
	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;
	}

}

servlet：

@WebServlet("/moduleServlet")
public class ModuleServlet extends HttpServlet {
	
	private IModuleService service = new ModuleService();
	
	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();
		String str = JSON.toJSONString(list);
		
		out.write(str);
		out.flush();
		out.close();
	}

}

Index.jsp：

<%@ 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是上下文参数，作为绝对路径使用，详细可以查看上一章EasyUI
			url : ctx + '/moduleServlet',
            //双击事件
			onDblClick : function(node) {
                //判重，如果为false即可以添加新的tab
				if(!$("#tt").tabs('exists',node.text)){
					$('#tt').tabs('add', {
						title:node.text,
						content:node.text,
						closable:true
					});
                //如果为true，证明已经存在，就移动到指定的tab
				}else{
					$('#tt').tabs('select',node.text)
				}
			}
		});
	})
</script>
</head>
<body class="easyui-layout">
	<div data-options="region:'north',title:'芜湖',split:true"
		style="height: 100px;"></div>
	<div data-options="region:'west',title:'功能导航',split:true"
		style="width: 200px;">
		<ul id="funcTree"></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>

运行效果：