将oracle中的数据绑定在界面中制作树形菜单
一,项目结构
将所需要的jar包导入:
实体类Module类代码:
import java.util.ArrayList;
import java.util.List;
public class Model {
private Integer id;
private Integer pid;
private String text;
private String icon;
private String url;
private int sort;
private List<Model> 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<Model> getChildren() {
return children;
}
public void setChildren(List<Model> children) {
this.children = children;
}
@Override
public String toString() {
return "Module [id=" + id + ", pid=" + pid + ", text=" + text + ", icon=" + icon + ", url=" + url + ", sort="
+ sort + "]";
}
}
dao包ModuleDao类代码:
·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;
}
service包ModuleService类代码:
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>
<html>
<head>
<meta charset="UTF-8">
<%@ include file="common/head.jsp" %>
<title>Insert title here</title>
<script type="text/javascript">
$(function(){
$("#funcTree").tree({
url:ctx+'/ModuleServlet',
//用户双击一个节点触发
onDblClick: function(node){
if(!$("#tt").tabs('exists',node.text)){
$('#tt').tabs('add',{
title:node.text,
content:node.text,
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
}
}
});
});
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'west',title:'功能导航',split:true" style="width:150px;">
<ul id="funcTree" class="easyui-tree"></ul>
</div>
<div data-options="region:'center',title:'center title'" 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>
效果图: