easyUI碰哒鬼后台管理系统

最新推荐文章于 2025-04-22 14:26:54 发布

原创

最新推荐文章于 2025-04-22 14:26:54 发布

· 905 阅读

3 ·

版权

文章标签：

#easyui #前端 #javascript

本文介绍了如何使用easyUI创建一个后台管理系统，包括主界面展示、全量数据展示、模糊查询功能、数据的新增、删除和修改操作，以及与数据库表的交互。

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

主界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta charset="UTF-8">
<title>碰哒鬼后台管理</title>
<!-- include指令引入公共资源 -->
<%@ include file="static/common/easyui-link.jsp"%>
<!-- js -->
<script type="text/javascript">
	$(function(){
		//调用生成树形菜单的组件即可
		$('#menuTree').tree({    
		    url:xPath+'/PromissionList.do',
		    onClick:function(node){
		    	//alert(node.text);
		    	addMyTabs(node);
		    }
		});  
	});
	//生成动态选项卡
	function addMyTabs(node){
		//一级菜单 不能生成选项卡
		if(node.id === '-1'){
			return;
		}
		//去除重复  默认选中
		let flag = $('#myTabs').tabs("exists",node.text);
		if(flag === true){
			$('#myTabs').tabs("select",node.text);
			return;
		}
		
		$('#myTabs').tabs('add',{    
		    title:node.text,    
		    content:"<iframe style = 'margin:0px;padding:0px;border:0;' src = '"+xPath+node.url+"' width = '100%' height = '100%'>",    
		    closable:true 
		     
		});  
	}

</script>
</head>
<body>
	<div id="container_index" class="easyui-layout" data-options="fit:true">
		<div data-options="region:'north',title:'碰哒鬼后台管理',split:true"
			style="height: 30px;"></div>
		<div data-options="region:'south',title:'碰哒鬼后台管理尾页',split:true"
			style="height: 100px;font-size: 30px">&copy;&copy;&copy;归碰哒鬼集团所有</div>
		<div data-options="region:'west',title:'后台菜单📕',split:true"
			style="width: 180px;">
			<!-- 菜单列表 -->
			<ul id="menuTree"></ul>
		</div>
		<div data-options="region:'center',title:'内容展示💷'"
			style="padding: 5px; background: #eee;">
			<!-- 选项卡容器 -->
			<div id="myTabs" class="easyui-tabs" data-options="fit:true"></div>
		</div>
	</div>
</body>
</html>