首页
所有分类
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 5.3.0 安装分析心得
Aug 07 PHP
PHP文件打开、关闭、写入的判断与执行代码
May 24 PHP
Php Ctemplate引擎开发相关内容
Mar 03 PHP
thinkphp的CURD和查询方式介绍
Dec 19 PHP
PHP实现无限极分类图文教程
Nov 25 PHP
PHP使用array_fill定义多维数组的方法
Mar 18 PHP
PHP基于文件存储实现缓存的方法
Jul 20 PHP
简单理解PHP的面向对象编程方式
May 17 PHP
YII2 实现多语言配置的方法分享
Jan 11 PHP
Laravel5.* 打印出执行的sql语句的方法
Jul 24 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
Oct 11 PHP
PHP array_reverse() 函数原理及实例解析
Jul 14 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
动态代理(1) 三角函数(1) Carbon(1) MyBatis(5) 迪杰斯特拉(1) Dijkstra(1) seata(1) Android Studio(4) 优先队列(1) nacos(1)
You might like
PHP 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
php实现在线生成条形码示例分享(条形码生成器)
2013/12/30 PHP
php之curl实现http与https请求的方法
2014/10/21 PHP
php-beanstalkd消息队列类实例分享
2017/07/19 PHP
php微信开发之谷歌测距
2018/06/14 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
JQuery优缺点分析说明
2011/04/10 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
javascript实现博客园页面右下角返回顶部按钮
2015/02/22 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
2015/03/26 Javascript
JavaScript对象学习小结
2015/09/02 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
JS实现自定义状态栏动画文字效果示例
2017/10/12 Javascript
基于datepicker定义自己的angular时间组件的示例
2018/03/14 Javascript
Bootstrap4 gulp 配置详解
2019/01/06 Javascript
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
python字典快速保存于读取的方法
2018/03/23 Python
详解python中的Turtle函数库
2018/11/19 Python
Python sklearn中的.fit与.predict的用法说明
2020/06/28 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
Html5写一个简单的俄罗斯方块小游戏
2019/12/03 HTML / CSS
历史系毕业生自荐信
2013/10/28 职场文书
初中语文教学反思
2014/02/02 职场文书
装修设计师求职信
2014/02/26 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
市级三好生竞选稿
2015/11/21 职场文书
2016同学毕业寄语大全
2015/12/04 职场文书
教师听课学习心得体会
2016/01/15 职场文书
在前女友婚礼上,用Python破解了现场的WIFI还把名称改成了
2021/05/28 Python
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android