PHP ? EasyUI DataGrid 资料存的方式介绍


Posted in PHP onNovember 07, 2012

继上篇文章 PHP ? EasyUI DataGrid 资料取的方式,本篇继续讲述,如何操作 DataGrid,把资料存入资料库,并实现 MVC 架构,将资料层分离、独立运作。
本篇文章主要是改良,原 EasyUI DataGrid 的范例  Build CRUD Application with jQuery EasyUI。

在官方范例中已经示范如何操作资料,但其中有个问题就是,你要操作资料的每个动作都需要一支对应的程式才能动作,像是新增、删除、修改以及取得资料,总共至少要有四支对应程式才能运作。

读者可以想想,这还只是一支单档 使用者的基本资料维护而已,一般系统光基本资料都有十几支甚至几十支程式在运作,所以这样的方式,势必要改良才能运作在实务上。
在来按造 多层次架构设计前言 的精神,大家可以发现这四支程式其实对每一个基本资料的操作来说,都是大同小异的,所以是可以把他标准化,用成一个固定框架,供后面类似程式来使用。

这部分,会分几篇文章来逐渐完成这各过程,藉由这逐渐演进的过程,来了解框架是如何成形的。
首先本篇,先来介绍,如何把分散的四支程式集中成为一支程式来呼叫,在读者往下阅读之前,可先在了解 PHP ? EasyUI DataGrid 资料取的方式 以及官方范例   Build CRUD Application with jQuery EasyUI 的运作方式,至少要能把范例 Run 起来,run 这个动作是很重要的,不要光看而已,亲身去测试才能了解其中的问题点。

要能实现将四支程式改成一支程式来运作,其实关键很简单,就是去改每个操作动作时呼叫的 url,改成都呼叫 DAL 端的程式 dal_user.php,接下来在呼叫前,都要传递一个 type 参数告诉 dal 你要进行何种动作。
目前 type 定义了下面四个动作
add 新增
mod 修改
del 删除
data 取得资料
了解 想要 dal 作哪些动作后,就可以开始来撰写 dal 程式了,当然现在这各 dal 还是一个非标准化的程式,但是他已经做到 MVC 的精神,把资料存取层跟表现层 分离开了,后面的文章, 会再来介绍,如何把本篇介绍的程式来标准化 dal 以及 UI 表现层。

dal_user.php

<?php 
$result = false; if (!empty($_REQUEST['type']) ) 
{ 
require_once(".\..\db\DB_config.php"); 
require_once(".\..\db\DB_class.php"); 
$db = new DB(); 
$db->connect_db($_DB['host'], $_DB['username'], $_DB['password'], $_DB['dbname']); 
$tablename = "STUser"; 
$type = $_REQUEST['type']; 
if($type == "del") 
{ 
$id = $_REQUEST['id']; 
$sql = "delete from STUser where UNum=$id"; 
$result = $db->query($sql); 
}else if($type == "data"){ 
$page = isset($_POST['page']) ? intval($_POST['page']) : 1; 
$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10; 
$offset = ($page-1)*$rows; 
$result = array(); 
$db->query("select count(*) As Total from $tablename"); 
$row = $db->fetch_assoc(); 
$result["total"] = $row["Total"]; 
$db->query("select * from $tablename limit $offset,$rows"); 
$items = array(); 
while($row = $db->fetch_assoc()){ 
array_push($items, $row); 
} 
$result["rows"] = $items; 
echo json_encode($result); 
}else{ 
$STUID = $_REQUEST['STUID']; 
$Password = $_REQUEST['Password']; 
$Nickname = $_REQUEST['Nickname']; 
$Birthday = $_REQUEST['Birthday']; 
if (!empty($_REQUEST['id']) ) { 
$id = $_REQUEST['id']; 
$sql = "update $tablename set STUID='$STUID',Password='$Password',Nickname='$Nickname' where UNum=$id"; 
}else{ // is add 
$sql = "insert into $tablename (STUID, Password, Nickname, DBSTS) values('$STUID','$Password','$Nickname', 'A')"; 
} 
$result = $db->query($sql); 
} 
} 
if($type != "data") 
{ 
if ($result == "true"){ 
echo json_encode(array('success'=>true)); 
} else { 
echo json_encode(array('msg'=>'had errors occured. ' . $result)); 
} 
} 
?>

dal 资料存取层 定义完了以后,就可以来实现 UI 介面来呼叫 dal,因为是使用 AJAX 的方式 来存取资料,所以 MVC 中的控制层有一部分是放在 介面层中,这部分,后面可以在用 JavaScript 将这部分的控制层标准化,在藉由 php 后端来传递参数呼叫,如此一来,则还是将所有控制大权集中在一支程式中,这些后面文章会再来介绍,这边先暂时打住。

datagrid.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>easyUI datagrid</title> 
<link rel="stylesheet" type="text/css" href="./../JS/EasyUI/themes/default/easyui.css"> 
<link rel="stylesheet" type="text/css" href="./../JS/EasyUI/themes/icon.css"> 
<script type="text/javascript" src="./../JS/jquery.js"></script> 
<script type="text/javascript" src="./../JS/EasyUI/jquery.easyui.min.js"></script> 
<script type="text/javascript" src="./../JS/EasyUI/easyui-lang-zh_CN.js"></script> 
<style type="text/css"> 
#fm{ 
margin:0; 
padding:10px 30px; 
} 
.ftitle{ 
font-size:14px; 
font-weight:bold; 
color:#666; 
padding:5px 0; 
margin-bottom:10px; 
border-bottom:1px solid #ccc; 
} 
.fitem{ 
margin-bottom:5px; 
} 
.fitem label{ 
display:inline-block; 
width:80px; 
} 
</style> 
<script type="text/javascript"> 
var url; 
function newUser(){ 
$('#dlg').dialog('open').dialog('setTitle','New User'); 
$('#fm').form('clear'); 
url = 'dal_user.php?type=add'; 
} 
function editUser(){ 
var row = $('#myDG').datagrid('getSelected'); 
if (row){ 
if(typeof(row.UNum) !== 'undefined') 
{ 
$('#dlg').dialog('open').dialog('setTitle','Edit User'); 
$('#fm').form('load',row); 
url = 'dal_user.php?type=mod&id='+row.UNum; 
}else{ 
alert("undefined"); 
} 
} 
} 
function saveUser(){ 
$('#fm').form('submit',{ 
url: url, 
onSubmit: function(){ 
//alert('sub :'+ url); 
return $(this).form('validate'); 
}, 
success: function(result){ 
var result = eval('('+result+')'); 
//alert(result.success); 
if (result.success){ 
$('#dlg').dialog('close'); // close the dialog 
$('#myDG').datagrid('reload'); // reload the user data 
} else { 
$.messager.show({ 
title: 'Error', 
msg: result.msg 
}); 
} 
} 
}); 
} 
function removeUser(){ 
var row = $('#myDG').datagrid('getSelected'); 
if (row){ 
$.messager.confirm('Confirm','Are you sure you want to remove this user?',function(r){ 
if (r){ 
//alert(row.UNum); 
$.post('dal_user.php', {type:'del', id:row.UNum}, function(result){ 
if (result.success){ 
$('#myDG').datagrid('reload'); // reload the user data 
} else { 
$.messager.show({ // show error message 
title: 'Error', 
msg: result.msg 
}); 
} 
},'json'); 
} 
}); 
} 
} 
</script> 
</head> 
<body> 
<h2>easyUI datagrid url 存取?y?</h2> 
<table id="myDG" class="easyui-datagrid" style="width:700px;height:450px" 
url="dal_user.php?type=data" toolbar="#toolbar" 
title="Load Data" iconCls="icon-save" pagination="true" 
toolbar="#toolbar" rownumbers="true" fitColumns="true" singleSelect="true"> 
<thead> 
<tr> 
<th field="STUID" width="120">User ID</th> 
<th field="Password" width="80" align="right">Password</th> 
<th field="Birthday" width="80" align="right">Birthday</th> 
<th field="Nickname" width="200">Nickname</th> 
<th field="DBSTS" width="60" align="center">DBSTS</th> 
</tr> 
</thead> 
</table> 
<div id="toolbar"> 
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a> 
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a> 
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">Remove User</a> 
</div> 
<div id="dlg" class="easyui-dialog" style="width:400px;height:350px;padding:10px 20px" 
closed="true" buttons="#dlg-buttons"> 
<div class="ftitle">User Information</div> 
<form id="fm" method="post" novalidate> 
<div class="fitem"> 
<label>User ID:</label> 
<input name="STUID" class="easyui-validatebox" required="true"> 
</div> 
<div class="fitem"> 
<label>Password:</label> 
<input name="Password" class="easyui-validatebox" required="true"> 
</div> 
<div class="fitem"> 
<label>Nickname:</label> 
<input name="Nickname"> 
</div> 
<div class="fitem"> 
<label>Birthday:</label> 
<input name="Birthday" class="easyui-validatebox" validType="email"> 
</div> 
</form> 
</div> 
<div id="dlg-buttons"> 
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a> 
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a> 
</div> 
</body> 
</html>

运作结果画面如下所示:

PHP ? EasyUI DataGrid 资料存的方式介绍

PHP ? EasyUI DataGrid 资料存的方式介绍

PHP 相关文章推荐
php str_pad 函数使用详解
Jan 13 PHP
php MsSql server时遇到的中文编码问题
Jun 11 PHP
用PHP读取和编写XML DOM的实现代码
Feb 03 PHP
PHP反转字符串函数strrev()函数的用法
Feb 04 PHP
PHP 实现explort() 功能的详解
Jun 20 PHP
解析PHP实现下载文件的两种方法
Jul 05 PHP
php的慢速日志引起的Mysql错误问题分析
May 13 PHP
2个比较经典的PHP加密解密函数分享
Jul 01 PHP
PHP实现将浏览历史页面网址保存到cookie的方法
Jan 26 PHP
php简单实现发送带附件的邮件
Jun 10 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
Dec 05 PHP
PHP设计模式之状态模式定义与用法详解
Apr 02 PHP
PHP ? EasyUI DataGrid 资料取的方式介绍
Nov 07 #PHP
PHP正确解析UTF-8字符串技巧应用
Nov 07 #PHP
nginx+php-fpm配置文件的组织结构介绍
Nov 07 #PHP
使用 PHPMAILER 发送邮件实例应用
Nov 07 #PHP
PHP数据集构建JSON格式及新数组的方法
Nov 07 #PHP
php动态实现表格跨行跨列实现代码
Nov 06 #PHP
对象失去焦点时自己动提交数据的实现代码
Nov 06 #PHP
You might like
PHP把网页保存为word文件的三种方法
2014/04/01 PHP
php堆排序实现原理与应用方法
2015/01/03 PHP
php使用PDO事务配合表格读取大量数据插入操作实现方法
2017/02/16 PHP
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
JavaScript encodeURI 和encodeURIComponent
2015/12/04 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
javascript事件绑定学习要点
2016/03/09 Javascript
Vuejs第十二篇之动态组件全面解析
2016/09/09 Javascript
js return返回多个值,通过对象的属性访问方法
2017/02/21 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
2017/03/10 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
Python在不同目录下导入模块的实现方法
2017/10/27 Python
python+os根据文件名自动生成文本
2019/03/21 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
使用Python的turtle模块画国旗
2019/09/24 Python
Python函数参数分类原理详解
2020/05/28 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
五一家具促销方案
2014/01/10 职场文书
业务员简历自我评价
2014/03/06 职场文书
环境整治工作方案
2014/05/18 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
超市工作总结范文2014
2014/12/19 职场文书
个人党性锻炼总结
2015/03/05 职场文书
企业百日安全活动总结
2015/05/07 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
婚庆答谢词大全
2015/09/29 职场文书
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫