怎么使用easy_ui搭建后台ui--初试牛刀（下）管理页面的搭建以及数据的增删查改实现

最新推荐文章于 2024-01-18 04:10:25 发布

shisiying

最新推荐文章于 2024-01-18 04:10:25 发布

阅读量1.3k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/seven_2016/article/details/53998892

版权

本文介绍了如何使用EasyUI创建后台管理页面，包括布局、选项卡、树形组件的运用，以及实现了数据的增删查改功能。通过具体的PHP代码和HTML示例，展示了操作流程。

摘要由CSDN通过智能技术生成

1.效果如下图，主要是完成后台菜单的搭建，以及某个功能模块的增删查改

2.后台管理页面的搭建，使用到了Layout(布局)组件，以及Tabs(选项卡)组件，Tree(树)组件

具体代码如下：

<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="css/admin.css" />
</head>
<body class="easyui-layout">

<div data-options="region:'north',title:'header',split:true,noheader:true" style="height:60px;background:#666;">
	<div class="logo">后台管理</div>
	<div class="logout">您好，| <a href="logout.php">退出</a></div>
</div>   
<div data-options="region:'south',title:'footer',split:true,noheader:true" style="height:35px;line-height:30px;text-align:center;">
	&copy;2009-2015 SEVEN_2016. Powered by PHP and EasyUI.
</div>    
<div data-options="region:'west',title:'导航',split:true" style="width:180px;padding:10px;">
	<ul id="nav" class="easyui-tree"></ul> 

</div>   
<div data-options="region:'center'" style="overflow:hidden;">
	<div id="tabs">
		<div title="起始页" style="padding:0 10px;display:block;">
			欢迎来到后台管理系统！
		</div>
	</div>
</div> 


<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
<script type="text/javascript" src="js/admin.js"></script>
</body>
</html>

调整样式：

.logo {
	width:180px;
	height:50px;
	line-height:50px;
	text-align:center;
	font-size:20px;
	font-weight:bold;
	float:left;
	color:#fff;
}
.logout {
	float:right;
	padding:30px 15px 0 0;
	color:#fff;
}
.dialog-button{
	text-align:center;
}
a {
	color:#fff;
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}

面板组件的创建，导航树的实现

$('#tabs').tabs({
		fit : true,
		border :

最低0.47元/天解锁文章

shisiying

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录