大家好呀,我是【小阿飞_】😜
上期文章给大家分享了easyui的基本介绍及布局用法,大家可以先回顾一下,因为本期文章就是在上一期的界面基础上进行讲解的👇
树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能
数结构的效果如下图:(可以用来做网页菜单)
那么本期文章就是使用数结构来来做一个可以通过数据库内容的增加而增加动态网页菜单
所用到的技术有: JQuery Easyui JSP JAVA Oracle
话不多说,先看本期文章的功能效果图👇
点击“会员管理”菜单项下面的子菜单“会员等级” 右侧的面版就可以跳到对应的内容中,点击下面任何子菜单的按钮同理👇
👇
👇
这是对应的数据库建表语句👇
CREATE TABLE bs_permission
(
id number DEFAULT NULL,
pid number DEFAULT NULL,
text varchar2(10) DEFAULT NULL,
url varchar2(255) DEFAULT NULL
);
create sequence seq_permission;
insert into bs_permission values(seq_permission.nextval,0,'会员管理','');
insert into bs_permission values(seq_permission.nextval,0,'商品管理','');
insert into bs_permission values(seq_permission.nextval,0,'订单管理','');
insert into bs_permission values(seq_permission.nextval,0,'数据报表','');
insert into bs_permission values(seq_permission.nextval,0,'系统管理','');
insert into bs_permission values(seq_permission.nextval,2,'会员卡充值','manager/user/recharge.jsp');
insert into bs_permission values(seq_permission.nextval,2,'会员等级','manager/user/level.jsp');
insert into bs_permission values(seq_permission.nextval,3,'状态管理','manager/goods/state.jsp');
insert into bs_permission values(seq_permission.nextval,3,'类目管理','manager/user/topic.jsp');
insert into bs_permission values(seq_permission.nextval,3,'评论管理','manager/user/comment.jsp');
--当在数据库新插入一条数据时,界面上的子菜单项也会增加
insert into bs_permission values(seq_permission.nextval,4,'用户订单','manager/order/order.jsp');
commit;
主界面代码(index.jsp)👇
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<title>Title</title>
<script src="jquery-easyui-1.5.5.2/jquery.min.js"></script>
<script src="jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="jquery-easyui-1.5.5.2/themes/default/easyui.css">
</head>
<body class="easyui-layout">
<div data-options="region:'north',title:'网站导航栏',collapsible:false" style="height:100px;"></div>
<div data-options="region:'west',title:'菜单',split:true" style="width:20%;">
<ul id="asideMenu"></ul>
</div>
<div data-options="region:'center',collapsible:false,border:false" style="padding:5px;background:#eee;">
<div id="mainTab" class="easyui-tabs" style="width:100%;height:100%;"></div>
</div>
<script>
let mainTab = $('#mainTab')
$('#asideMenu').tree({
url: '${pageContext.request.contextPath}/permission.do', //远程数据的地址
method: "POST",//访问方式
lines: true, //显示虚线
onClick(node) {
//判断是否是父节点
if (!node.attributes['pid']) {
return
}
//判断是不是已经打开了
if(mainTab.tabs('exists',node.text)){
mainTab.tabs('select',node.text)
return
}
mainTab.tabs('add', {
id:node.id,
title: node.text,
content:"<iframe src='"+node.attributes['url']+"'></iframe>"
});
}
});
</script>
</body>
</html>
连接Oracle数据库的代码👇
package util;
import java.sql.*;
public class DBHelper {
//定义链接字符串
private static final String URL = "jdbc:oracle:thin:@localhost:1521:orcl";
//加载驱动
static {
try {
Class.forName("oracle.jdbc.driver.OracleDriver");
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
}
//获得链接
public static Connection getCon() {
try {
return DriverManager.getConnection(URL, "scott", "123");
} catch (SQLException e) {
e.printStackTrace();
}
return null;
}
//关闭资源
public static void close(Connection con, PreparedStatement ps, ResultSet rs) {
try {
if (con != null && !con.isClosed()) {
con.close();
}
if (ps != null) {
ps.close();
}
if (rs != null) {
rs.close();
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
TreeFactory.java帮助类代码👇
package util;
import java.util.Arrays;
import java.util.List;
import java.util.Optional;
import java.util.stream.Collectors;
public class TreeFactory {
public static List<TreeNode> buildList(List<TreeNode> nodeList) {
List<TreeNode> list = buildList(nodeList, "0");
TreeNode root;
if (!list.isEmpty()) {
return list;
} else {
root = new TreeNode();
root.setId("000");
root.setParentId("-1");
root.setHasParent(false);
root.setHasChildren(true);
root.setChecked(true);
root.setChildren(list);
root.setText("主菜单");
root.setState("closed");
}
return Arrays.asList(root);
}
public static List<TreeNode> buildList(List<TreeNode> nodeList, String topMenuId) {
return Optional.ofNullable(nodeList).map(list -> {
list.forEach(item -> {
list.stream().filter(i -> {
return i.getId().equals(item.getParentId());
}).forEach(i -> {
i.setHasChildren(Boolean.TRUE);
i.getChildren().add(item);
});
});
return list.stream().filter(i -> {
return i.getParentId().equals(topMenuId);
}).collect(Collectors.toList());
}).get();
}
}
TreeNode.java帮助类代码👇
package util;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class TreeNode {
private String id;
private String text;
private String state;
private Boolean checked = false;
private Map<String, Object> attributes=new HashMap<>();
private List<TreeNode> children = new ArrayList<>();
private String parentId;
private Boolean hasParent = false;
private Boolean hasChildren = false;
public TreeNode() {
// TODO Auto-generated constructor stub
}
public TreeNode(String id, String text, String state, Boolean checked, Map<String, Object> attributes,
List<TreeNode> children, String parentId, Boolean hasParent, Boolean hasChildren) {
super();
this.id = id;
this.text = text;
this.state = state;
this.checked = checked;
this.attributes = attributes;
this.children = children;
this.parentId = parentId;
this.hasParent = hasParent;
this.hasChildren = hasChildren;
}
@Override
public String toString() {
return "TreeNode [id=" + id + ", text=" + text + ", state=" + state + ", checked=" + checked + ", parentId="
+ parentId + ", hasParent=" + hasParent + ", hasChildren=" + hasChildren + "]";
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public String getState() {
return state;
}
public void setState(String state) {
this.state = state;
}
public Boolean getChecked() {
return checked;
}
public void setChecked(Boolean checked) {
this.checked = checked;
}
public Map<String, Object> getAttributes() {
return attributes;
}
public void setAttributes(Map<String, Object> attributes) {
this.attributes = attributes;
}
public List<TreeNode> getChildren() {
return children;
}
public void setChildren(List<TreeNode> children) {
this.children = children;
}
public String getParentId() {
return parentId;
}
public void setParentId(String parentId) {
this.parentId = parentId;
}
public Boolean getHasParent() {
return hasParent;
}
public void setHasParent(Boolean hasParent) {
this.hasParent = hasParent;
}
public Boolean getHasChildren() {
return hasChildren;
}
public void setHasChildren(Boolean hasChildren) {
this.hasChildren = hasChildren;
}
}
PermissionServlet.java代码👇
package servlet;
import java.io.IOException;
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.PermissionDao;
@WebServlet("/permission.do")
public class PermissionServlet extends HttpServlet{
private PermissionDao permissionDao=new PermissionDao();
private ObjectMapper mapper = new ObjectMapper();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//查询所有的菜单,将菜单写出去
mapper.writeValue(resp.getOutputStream(),permissionDao.listNodes());
}
}
实体类Permission代码👇
package pojo;
public class Permission {
private Integer id;
private Integer pid;
private String text;
private String url;
public Permission() {
// TODO Auto-generated constructor stub
}
public Permission(Integer id, Integer pid, String text, String url) {
super();
this.id = id;
this.pid = pid;
this.text = text;
this.url = url;
}
@Override
public String toString() {
return "Permission [id=" + id + ", pid=" + pid + ", text=" + text + ", url=" + url + "]";
}
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 getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
}
PermissionDao.java代码👇
package dao;
import pojo.Permission;
import util.DBHelper;
import util.TreeFactory;
import util.TreeNode;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;
public class PermissionDao {
private Connection con;
private PreparedStatement ps;
private ResultSet rs;
public List<Permission> list() {
List<Permission> list = new ArrayList<Permission>();
try {
con = DBHelper.getCon();
ps = con.prepareStatement("select * from bs_permission");
rs = ps.executeQuery();
while (rs.next()) {
Permission permission = new Permission();
permission.setId(rs.getInt(1));
permission.setPid(rs.getInt(2));
permission.setText(rs.getString(3));
permission.setUrl(rs.getString(4));
list.add(permission);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
DBHelper.close(con, ps, rs);
}
return list;
}
public List<TreeNode> listNodes() {
List<TreeNode> nodes = new ArrayList<TreeNode>();
//数据库中
List<Permission> list = list();
//将permission封装成node
for (Permission permission : list) {
TreeNode node = new TreeNode();
node.setId(String.valueOf(permission.getId()));
node.setParentId(String.valueOf(permission.getPid()));
node.setText(permission.getText());
//把pid放到自定义属性中
node.getAttributes().put("pid",permission.getPid());
//把url放到自定义属性中
node.getAttributes().put("url",permission.getUrl());
nodes.add(node);
}
return TreeFactory.buildList(nodes, "0");
}
}
用于子菜单内容展示的JSP界面代码(格式一致,示例一个即可)👇
🐖:这里的文件夹建法要和上面👆Oracle数据库中插入的URL内容相对应
🍞示例:good文件夹下的子菜单state.jsp界面代码👇
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>我是第3个内容</h1>
</body>
</html>
本期文章所做的功能到这里就结束了,你学会了吗(●'◡'●)