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

于 2017-01-03 22:24:32 发布
阅读量1.3k 收藏 2
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/seven_2016/article/details/53998892
本文介绍了如何使用EasyUI创建后台管理页面，包括布局、选项卡、树形组件的运用，以及实现了数据的增删查改功能。通过具体的PHP代码和HTML示例，展示了操作流程。

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

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 : false,
	});
	$('#nav').tree({
		url:'get_data.php',
		lines:true,
		onLoadSuccess:function(node,data){
			if(data){
				$(data).each(function(){
					if(this.state=='closed'){
						$('#nav').tree('expandAll');
					}
				});
			}
		},
		onClick:function(node){
			if(node.url){
				if($('#tabs').tabs('exists',node.text)){
					$('#tabs').tabs('select',node.text);
				}else{
					$('#tabs').tabs('add',{
					title:node.text,
					closable:true,
					href:node.url
					});

				}
				
			}
		}
	});
url返回的数据是json格式，可以从数据库取出，也可以自己构造

get_data.php:

[{    
    "id": 1,    
    "text": "文章管理",    
    "state": "closed",    
    "children": [{    
        "id": 11,    
        "text": "文章列表"
        
    },{    
        "id": 12,    
        "text": "文章回收"   
    }]    
},
{    
    "id": 2,    
    "text": "用户管理",    
    "state": "closed",    
    "children": [{    
        "id": 21,    
        "text": "用户列表",
        "url":"user.php" 
    }]    
}
]
如果存在url，点击之后新增一个面板，并且载入url页面，并且如果原面板已经存在，就不用创建新的面板
3.数据的增删查改的实现，使用到组件DataGrid(数据表格)组件

html代码如下:

<table id="manager"></table>
js代码如下： 

$('#manager').datagrid({
			url
		fit : true,
		fitColumns : true,
		striped : true,
		rownumbers : true,
		border : false,
		pagination : true,
		pageSize : 20,
		pageList : [10, 20, 30, 40, 50],
		pageNumber : 1,
		sortName : 'date',
		sortOrder : 'desc',
		toolbar : '#manager_tool',
		columns : [[
			{
				field : 'id',
				title : '自动编号',
				width : 100,
				checkbox : true,
			},
			{
				field : 'manager',
				title : '管理员帐号',
				width : 100,
			},
			{
				field : 'auth',
				title : '拥有权限',
				width : 100,
			},
			{
				field : 'date',
				title : '创建日期',
				width : 100,
			},
		]],
	});
4.管理组件： 

<div style="margin-bottom:5px;">
		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="manager_tool.add();">添加</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="manager_tool.edit();">修改</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="manager_tool.remove();">删除</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" id="save" onclick="manager_tool.reload();">刷新</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-redo" plain="true" id="redo" onclick="manager_tool.redo();">取消选择</a>		
	</div>
5.新增管理

页面：

<form id="manager_add" style="margin:0;padding:5px 0 0 25px;color:#333;">
	<p>管理帐号：<input type="text" name="manager" class="textbox" style="width:200px;"></p>
	<p>管理密码：<input type="password" name="password" class="textbox" style="width:200px;"></p>
	<p>分配权限：<input id="auth" class="textbox" name="auth" style="width:205px;"></p>
</form>

js代码 

$('#manager_add').dialog({
		width : 350,
		modal:true,
		closed:true,
		title : '新增管理',
		buttons:[{
			text:'提交',
			iconCls:'icon-add',
			handler:function(){
				if($('#manager_add').form('validate')){

						$.ajax({
						url:'addManger.php',
						type:"post",
						data: {
							manager:$('input[name="manager"]').val(),
							password:$('input[name="password"]').val(),
							auth:$('#auth').combotree('getText')
						},
						beforeSend:function(){
							$.messager.progress({
								text:'正在新增中...',
							});
						},
						success:function(data,response,status){
							$.messager.progress('close');
							if(data>0){
								$.messager.show({
									title:'提示',
									msg:'新增成功！'
								});
								$('#manager_add').dialog('close').form('reset');
								$('#manager').datagrid('reload');
							}else{
								$.messager.alert('新增失败！','未知错误！请重试！');
							}
							
						}
					});
					
				}

			}
		},{
			text:'取消',
			iconCls:'icon-redo',
			handler:function(){
				$('#manager_add').dialog('close').form('reset');

			}
		}
		],
	});

点击按钮之后：

manager_tool={add : function(){
			$('#manager_add').dialog('open');
			$('input[name="manager"]').focus();
		}}
文本框的验证： 

//管理账号
	$('input[name="manager"]').validatebox({
		required:true,
		validType:'length[2,20]',
		missingMessage:'请输入管理名称',
		invalidMessage:'管理名称在2-20位！'
	});
	//管理密码
	$('input[name="password"]').validatebox({
		required:true,
		validType:'length[2,20]',
		missingMessage:'请输入管理密码',
		invalidMessage:'管理密码在2-20位！'
	});

以及树形数据的选择; 

//分配权限
	$('#auth').combotree({
		url:'get_data.php',
		lines:true,
		multiple:true,
		checkbox:true,
		onlyLeafCheck:true,
		onLoadSuccess:function(node,data){
			var _this=this;
			if(data){
				$(data).each(function(){
					if($.inArray(data.text,auth)!=-1){
						$(_this).tree('check',data.target)
					}
					if(this.state=='closed'){
						$(_this).tree('expandAll');
					}
				});
			}
		}
	});



6.编辑

页面代码：

<form id="manager_edit" style="margin:0;padding:5px 0 0 25px;color:#333;">
	<p>管理帐号：<input  name="id" type="hidden"></p>
	<p>管理帐号：<input type="text" name="manager_edit" class="textbox" style="width:200px;"></p>
	<p>管理密码：<input type="password" name="password_edit" class="textbox" style="width:200px;"></p>
	<p>分配权限：<input id="auth_edit" class="textbox" name="auth_edit" style="width:205px;"></p>
</form>

js代码： 

//编辑
	$('#manager_edit').dialog({
		width : 350,
		title : '修改管理',
		modal : true,
		closed : true,
		iconCls : 'icon-user-add',
		buttons : [{
			text : '提交',
			iconCls : 'icon-edit-new',
			handler : function () {
				if ($('#manager_edit').form('validate')) {
					$.ajax({
						url : 'updateManager.php',
						type : 'post',
						data : {
							id : $('input[name="id"]').val(),
							password : $('input[name="password_edit"]').val(),
							auth : $('#auth_edit').combotree('getText'),
						},
						beforeSend : function () {
							$.messager.progress({
								text : '正在修改中...',
							});
						},
						success : function (data, response, status) {
							$.messager.progress('close');
							
							if (data > 0) {
								$.messager.show({
									title : '提示',
									msg : '修改管理成功',
								});
								$('#manager_edit').dialog('close').form('reset');
								$('#manager').datagrid('reload');
							} else {
								$.messager.alert('修改失败！', '未知错误或没有任何修改，请重试！', 'warning');
							}
						}
					});
				}
			},
		},{
			text : '取消',
			iconCls : 'icon-redo',
			handler : function () {
				$('#manager_edit').dialog('close').form('reset');
			},
		}],
	});

点击按钮之后： 

manager_tool={edit:function(){
			//获取选择的行，
			var rows=$('#manager').datagrid('getSelections');
			if(rows.length>1){
				$.messager.alert('警告操作','编辑记录只能选定一条数据！');
			}else if(rows.length==1){
				$.ajax({
						url:'getManger.php',
						type:"post",
						data: {
							id:rows[0].id
						},
						beforeSend:function(){
							$.messager.progress({
								text:'正在获取中...',
							});
						},
						success:function(data,response,status){
							$.messager.progress('close');
							if(data>0){
								//返回修改来的数据
								var obj=$.parseJSON(data);
								var auth=obj[0].auth.split(',');
								$('#manager_edit').form('load',{
									id:obj[0].id,
									manager_edit:obj[0].manager,
									auth_edit:obj[0].auth
								}).dialog('open');


							}else{
								$.messager.alert('获取失败！','未知错误！请重试！');
							}
							
						}
					});
			}else if(rows.length==0){
				$.messager.alert('警告操作','编辑记录至少选定一条数据！');
			}
		}}
7.删除

点击按钮之后：

manager_tool={
    remove : function () {
			var rows = $('#manager').datagrid('getSelections');
			if (rows.length > 0) {
				$.messager.confirm('确定操作', '您正在要删除所选的记录吗？', function (flag) {
					if (flag) {
						var ids = [];
						for (var i = 0; i < rows.length; i ++) {
							ids.push(rows[i].id);
						}
						//console.log(ids.join(','));
						$.ajax({
							type : 'POST',
							url : 'deleteManager.php',
							data : {
								ids : ids.join(','),
							},
							beforeSend : function () {
								$('#manager').datagrid('loading');
							},
							success : function (data) {
								if (data) {
									$('#manager').datagrid('loaded');
									$('#manager').datagrid('load');
									$('#manager').datagrid('unselectAll');
									$.messager.show({
										title : '提示',
										msg : data + '个管理被删除成功！',
									});
								}
							},
						});
					}
				});
			} else {
				$.messager.alert('提示', '请选择要删除的记录！', 'info');
			}
		}
}



以上。。。




评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值