首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

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 ? EasyUI DataGrid 资料存的方式介绍

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
PHP 编写的 25个游戏脚本
May 11 PHP
php的memcached客户端memcached
Jun 14 PHP
PHP重定向的3种方式
Mar 07 PHP
国产PHP开发框架myqee新手快速入门教程
Jul 14 PHP
php实现以只读方式打开文件的方法
Mar 16 PHP
php返回当前日期或者指定日期是周几
May 21 PHP
php正则表达式获取内容所有链接
Jul 24 PHP
php版微信自动获取收货地址api用法示例
Sep 22 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
Feb 15 PHP
浅谈PHP表单提交(POST&amp;GET&amp;URL编/解码)
Apr 03 PHP
php利用ffmpeg提取视频中音频与视频画面的方法详解
Jun 07 PHP
php中请求url的五种方法总结
Jul 13 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
Outlook(1) celery(1) Three.js(1) 黑屏(2) 条形码(1) SeaTable(1) MutationObserver(1) tree shaking(1) Mysql8(2) OOP(1)
You might like
实现分十页分向前十页向后十页的处理
2006/10/09 PHP
php socket方式提交的post详解
2008/07/19 PHP
PHPMailer邮件类利用smtp.163.com发送邮件方法
2008/09/11 PHP
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
php采集时被封ip的解决方法
2010/08/29 PHP
如何获知PHP程序占用多少内存(memory_get_usage)
2012/09/23 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够（升级PHP要谨慎）
2017/07/27 PHP
php用wangeditor3实现图片上传功能
2019/08/22 PHP
原生JavaScript编写canvas版的连连看游戏
2016/05/29 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
2016/10/09 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
vue单页应用加百度统计代码（亲测有效）
2018/01/31 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
JavaScript变量Dom对象的所有属性
2020/04/30 Javascript
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
英国的潮牌鞋履服饰商店：size?
2019/03/26 全球购物
精选奢华：THE LIST
2019/09/05 全球购物
优秀毕业大学生推荐信
2013/11/13 职场文书
求职自荐书范文
2013/12/04 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
2015年城管个人工作总结范文
2015/04/20 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书
个人合作协议范本
2015/08/06 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python
Python中使用tkFileDialog实现文件选择、保存和路径选择
2022/05/20 Python