首页
所有分类
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根据某字段对多维数组进行排序的方法
Mar 07 PHP
PHP传参之传值与传址的区别
Apr 24 PHP
windows平台中配置nginx+php环境
Dec 06 PHP
CodeIgniter表单验证方法实例详解
Mar 03 PHP
利用PHP命令行模式采集股票趋势信息
Aug 09 PHP
php简单实现多维数组排序的方法
Sep 30 PHP
微信 开发生成带参数的二维码的实例
Nov 23 PHP
php简单计算年龄的方法(周岁与虚岁)
Dec 06 PHP
PHP符合PSR编程规范的实例分享
Dec 21 PHP
php命令行写shell实例详解
Jul 19 PHP
Yii框架操作cookie与session的方法实例详解
Sep 04 PHP
Laravel模糊查询区分大小写的实例
Sep 29 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) Parser(1) 算法(1) Vscode(3) tokenizer(1) SSH(3) 时钟(1) 递归(1) 后端(1)
You might like
php下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
php动态添加url查询参数的方法
2015/04/14 PHP
PHP实现HTML页面静态化的方法
2015/11/04 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
js中indexof的用法详细解析
2013/12/24 Javascript
浅谈JavaScript的事件
2015/02/27 Javascript
jQuery实现的在线答题功能
2015/04/12 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
node内置调试方法总结
2018/02/22 Javascript
JS动画定时器知识总结
2018/03/23 Javascript
es6数值的扩展方法
2019/03/11 Javascript
了解重排与重绘
2019/05/29 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
2019/08/20 Javascript
js实现单元格拖拽效果
2020/02/10 Javascript
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
python 设置文件编码格式的实现方法
2017/12/21 Python
详解Python_shutil模块
2019/03/15 Python
python basemap 画出经纬度并标定的实例
2019/07/09 Python
无需压缩软件，用python帮你操作压缩包
2020/08/17 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
委托与事件是什么关系？为什么要使用委托
2014/04/18 面试题
模范家庭事迹材料
2014/02/10 职场文书
社区交通安全实施方案
2014/03/22 职场文书
《雨点儿》教学反思
2014/04/14 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
幼儿园大班开学寄语（2015秋季）
2015/05/27 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL
Python中threading库实现线程锁与释放锁
2021/05/17 Python
Python标准库pathlib操作目录和文件
2021/11/20 Python