【第21期】观点:人工智能到底用 GPU?还是用 FPGA?

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

原创 2017年01月03日 22:24:32

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');
			}
		}
}



以上。。。




版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

【ssm个人博客项目实战02】easy UI搭建后台管理界面

前面一节我们已经成功搭建ssm项目的环境,接下来我们需要做的就是搭建我们后台管理界面的框架。 这搭建完之后的效果图 基于easy UI搭建后台界面jQuery EasyUI是一组基于jQuery的...

JQuery Easy UI —— 如何让DataGrid自适应页面宽度

我想正在用JQuery Easy UI的朋友一定很希望DataGrid能够自适应页面大小变化,目前我还没发现其自带此功能,因此简单写了一个实现方法,与网友们分享,也希望能够帮助有需要的朋友。 下面是我基于JQuery做的一个实现: [code="js"] /** * JQuery扩展方法,用户对JQuery EasyUI的DataGrid控件进行操作。 */ $.fn.extend({ /** * 修改DataGrid对象的默认大小,以适应页面宽度。 * * @param heightMargin * 高度对页内边距的距离

玩转Web之Json(二)----jquery easy ui + Ajax +Json+SQL实现前后台数据交互

最近在学Json,在网上也找过一些资料,觉得有点乱,在这里,我以easy ui的登录界面为例来说一下怎样用Json实现前后台的数据交互 使用Json,首先需要导入一些jar包,这些资源可以在网上下载到...

使用easy-ui tab 的总结(切换问题)

最近有空研究easy-ui-tab 控件的使用时总结:   easy-ui-tab控件的使用,通过从网上看到很多人的抱怨,比如内存泄露等等问题。从一个开发者的角度来说,我们应该感谢它,尽管它现在不是尽善尽美,毕竟它为我们带来了一些便利!   言归正传,最近从网上找了一个关于easy-ui-tab的demo,里面是一位前辈整理的关于与tab的使用,最初感觉不错。从客户的使用角度,比先前每次都新打开

【JQuery Easy UI】后台管理系统的简单布局分享

JQuery Easy UI 框架 简单 布局
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)