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

一时失言乱红尘 2022-07-13 09:11 135阅读 0赞

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

![Image 1][]

![Image 1][]![Center][]

![Center 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;">
    	©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代码如下:

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.管理组件：

5.新增管理

页面：

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.编辑

页面代码：

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

以上。。。

[Image 1]: 
[Center]: /images/20220713/6762621c0774467c8b3a4bbf3f351c7e.png
[Center 1]: /images/20220713/b3ca4b9732db4d88855720e3bc68d7af.png