用easyUI搭建树形菜单+tab页

最新推荐文章于 2023-07-20 15:08:25 发布

违规昵称qwe

最新推荐文章于 2023-07-20 15:08:25 发布

阅读量454

点赞数

分类专栏： Javaweb 文章标签： java eclipse tomcat

本文链接：https://blog.csdn.net/m0_63814777/article/details/124026756

版权

Javaweb 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果如下：

点击选项可以弹出tab页，样式是easyUI自带的

核心代码：

主界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%
    //拿到绝对路径，例如：demo/  
	request.setAttribute("ctx", request.getContextPath());
%>
 
<script type="text/javascript" src="${ctx }/js/jquery-easyui-1.5.5.2/jquery.min.js"></script>
<script type="text/javascript" src="${ctx }/js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${ctx }/js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="${ctx }/js/jquery-easyui-1.5.5.2/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="${ctx }/js/jquery-easyui-1.5.5.2/themes/icon.css"/>
 
<script type="text/javascript">
    //将拿到的路径赋值给js变量
	var ctx = "${ctx}";
</script>

<%@ 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:'nhhu',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>

记得需要导js包

实体类

package com.zking.euidom.entity;

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方法

package com.zking.euidom.dao;

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

import com.zking.euidom.entity.Model;
import com.zking.euidom.util.DBHelper;

public class ModelDao implements Imodeldao{

	@Override
	public List<Model> listModel(int pid) {
		List<Model> 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.getCon();
			ps = con.prepareStatement(sql);
			ps.setInt(1, pid);
			rs = ps.executeQuery();
			
			while(rs.next()) {
				Model m = new Model();
				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.myClose(con, ps, rs);
		}
		
		return list;
	}
}

数据库帮助类

package com.zking.euidom.util;

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

/**
 * 数据库辅助类
 * @author 
 *
 * @date 2022年2月26日 下午3:07:49
 */
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(con!=null&&!con.isClosed()){
				con.close();
			}
			if(ps!=null){
				ps.close();
			}
			if(rs!=null){
				rs.close();
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	/*
	 * 
	 * //jdbc进行验证
	String URL="jdbc:oracle:thin:@localhost:1521:orcl";
	String CNAME="oracle.jdbc.driver.OracleDriver";
	//加载驱动
	Class.forName(CNAME);
	//创建连接
	Connection con=DriverManager.getConnection(URL, "scott", "tiger");
	 * */
	
}

业务处理：

package com.zking.euidom.biz;

import java.util.List;

import com.zking.euidom.dao.Imodeldao;
import com.zking.euidom.dao.ModelDao;
import com.zking.euidom.entity.Model;

public class ModelBiz implements ImodelBiz{
	private Imodeldao dao = new ModelDao();

	@Override
	public List<Model> listModel(int pid) {
		
		List<Model> list = dao.listModel(pid);
		
		for(Model m: list) {
			if(m.getUrl() == null || "".equals(m.getUrl().trim())) {
				m.setChildren(listModel(m.getId()));
			}
		}
		return list;
	}
	public static void main(String[] args) {
		ImodelBiz service = new ModelBiz();
		List<Model> list = service.listModel(-1);
		for (Model model : list) {
			System.out.println(model.toString());
		}
	}
}

servelt：

package com.zking.euidom.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.alibaba.fastjson.JSON;
import com.zking.euidom.biz.ImodelBiz;
import com.zking.euidom.biz.ModelBiz;
import com.zking.euidom.entity.Model;
@WebServlet("/moduleServlet")
public class ModelServlet extends HttpServlet{
	
	private ImodelBiz biz = new ModelBiz();
	@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 {
		req.setCharacterEncoding("utf-8");
		resp.setContentType("application/json; charset=utf-8");
		
		
		List<Model> list = biz.listModel(-1);
		
		PrintWriter out = resp.getWriter();
		String str = JSON.toJSONString(list);
		
		out.write(str);
		out.flush();
		out.close();
	}
}