easyui前端工作-Tree菜单数据的绑定方式&动态添加选项卡&菜单数据绑定_request.setattribute("ctx", request.getcontextpath-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_67514201/article/details/124118101

本文介绍了如何使用EasyUI实现左侧菜单管理的数据绑定，通过Tree组件展示目录结构。详细讲解了从后台获取数据到前端进行绑定的过程，包括在DAO、Service、Servlet中的实现步骤，以及动态添加选项卡的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要实现的功能：用Tree（树）实现左侧菜单管理数据绑定。

页面最初展示

目录结构

需要的方法（三层架构）

在 dao 包在 IModuleDao 接口中在实现包 impl 中的 ModuleDao 类中（实现 IModuleDao 接口）


public class ModuleDao implements IModuleDao{
	private Connection con;// 连接对象
	private PreparedStatement ps;// 执行对象
	private ResultSet rs;// 结果集对象
	private Module module;// 对象
	private List<Module> listModule;// 集合
	private String sql;// 保存sql语句
	private int n;// 受影响的行数
	
	@Override
	public List<Module> query(Integer pid) throws SQLException{
		listModule = new ArrayList<Module>();
		con = DBAccess.getConnection();
		sql = "select id,pid,text,url from t_module where pid = ? order by sort";
		ps = con.prepareStatement(sql);
		ps.setInt(1, pid);
		rs = ps.executeQuery();
		while(rs.next()) {
			module = new Module();
			module.setId(rs.getInt("id"));
			module.setPid(rs.getInt("pid"));
			module.setText(rs.getString("text"));
			module.setUrl(rs.getString("url"));
			listModule.add(module);
		}
		DBAccess.close(con, ps, rs);
		return listModule;
	}
	
}

在实现包 impl 中的 ModuleBiz 类中（实现 IModuleBiz 接口）

public class ModuleBiz implements IModuleBiz {
	private IModuleDao imd = new ModuleDao();
	@Override
	public List<Module> query(Integer pid) throws SQLException {
		//获取子节点的集合
		List<Module> listModule = imd.query(pid);
		//遍历子节点集合
		for (Module m : listModule) {
			if(null == m.getUrl()||"".equals(m.getUrl())) {
				m.setChildren(query(m.getId()));
			}
		}
		return listModule;
	}

}

ModuleServlet 的编写（ servlet 包）

@WebServlet("/moduleServlet")
public class ModuleServlet extends HttpServlet{
	@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("text/html;charset=utf-8");
		IModuleBiz imd = new ModuleBiz();
		PrintWriter out = resp.getWriter();
		try {
			//调用查询节点的方法query
			List<Module> listModule = imd.query(-1);
			//将节点集合数据listModule转换成JSON数据
			String jsonString =JSON.toJSONString(listModule);
					
			out.write(jsonString);
			out.flush();
			out.close();
			
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- base标签的href属性里面的内容会自动添加在head标签里面的引入的路径前面 -->
<base href="${pageContext.request.contextPath }/static/" />

<!-- 引入easyui相关文件 -->
<!-- 引入jquery库 -->
<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/jquery.min.js"></script>
<!-- 引入js文件 -->
<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
<!-- 引入easyui的中文国际化js -->
<script type="text/javascript" src="static/js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入css样式文件 -->
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.5.2/themes/default/easyui.css"/>
<!-- 引入图片库 -->
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.5.2/themes/icon.css"/>

<!-- 动态获取项目名，并保存到request作用域 -->
<%
	request.setAttribute("ctx", request.getContextPath());
%>

<!-- 从request作用域里面获取项目名，并赋给一个js变量 -->
<script type="text/javascript">
	var ctx = '${ctx}';
</script>

1.动态绑定Tree菜单数据

2.点击左侧菜单动态在右边内容区域添加选项卡

3.绑定节点数据-后台

4.前端绑定数据实现

最终页面

<%@ 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="static/common/head.jsp" %>
</head>
<body class="easyui-layout">   
    <div data-options="region:'north',title:'网上书城',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'版权/链接',split:true" style="height:100px;"></div>   
    <div data-options="region:'west',title:'菜单管理 ',split:true" style="width:200px;">
    	<!-- 左侧菜单绑定  -->
    	<ul id="menuTree" class="easyui-tree">   
		   
		</ul>  
    	
    </div> 
    <!--右侧内容区域的div  -->  
    <div data-options="region:'center',title:'内容区域'" style="padding:5px;background:#eee;">
    	<!-- 绑定选项卡的div -->
    	<div id="myTab" class="easyui-tabs" style="width:100%;height:100%;">   
		    <!-- 首页选项卡 -->
		    <div title="Tab1" style="padding:20px;display:none;">   
		        首页内容    
		    </div>   
		
		</div>  
    	
    </div>   
</body> 

<script type="text/javascript">
	$(function(){
		/*绑定树形菜单数据  */
		$('#menuTree').tree({  
		    url:ctx+'/static/date/tree_data1.json',
		    onClick: function(node){
				//当点击左侧菜单节点的时候在右侧内容区域添加选项卡
		    	$('#myTab').tabs('add',{    
		    	    title:'New Tab',    
		    	    content:'Tab Body',    
		    	    closable:true,    
		    	    
		    	});  
			}
			
		    
		});  
	})
</script> 
</html>