首页
所有分类
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 相关文章推荐
一个简单的MySQL数据浏览器
Oct 09 PHP
php自动加载的两种实现方法
Jun 21 PHP
PHP array 的加法操作代码
Jul 24 PHP
Zend Studio 实用快捷键一览表(精心整理)
Aug 10 PHP
PHP计算指定日期所在周的开始和结束日期的方法
Mar 24 PHP
Laravel5.5以下版本中如何自定义日志行为详解
Aug 01 PHP
PHP PDOStatement::errorCode讲解
Jan 31 PHP
thinkPHP框架RBAC实现原理分析
Feb 01 PHP
php防止表单重复提交实例讲解
Feb 11 PHP
深入学习微信网址链接解封的防封原理visit_type
Aug 15 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
Feb 15 PHP
Laravel中Kafka的使用详解
Mar 24 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
tabBar(1) sortInts(1) element-china-area-data(1) Apache(17) WebSockets(3) Flutter(2) feDisplacementMap(1) Navigator(1) 数据重复(1) Hudi(1)
You might like
PHP调用Webservice实例代码
2011/07/29 PHP
Yii框架登录流程分析
2014/12/03 PHP
PHP学习笔记（一）：基本语法之标记、空白、和注释
2015/04/17 PHP
php实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
比较完整的微信开发php代码
2016/08/02 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
PHP设计模式之命令模式示例详解
2020/12/20 PHP
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
使用JavaScript库还是自己写代码？
2010/01/28 Javascript
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
javascript中强制执行toString()具体实现
2013/04/27 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
2013/06/05 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
jQuery图片轮播（二）利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
微信小程序 页面跳转如何实现传值
2017/04/05 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
用js简单提供增删改查接口
2019/05/12 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
浅谈es6中的元编程
2020/12/01 Javascript
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
python系列 文件操作的代码
2019/10/06 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
python利用faker库批量生成测试数据
2020/10/15 Python
python多线程爬取西刺代理的示例代码
2021/01/30 Python
html5理解head_动力节点Java学院整理
2017/07/13 HTML / CSS
党建工作先进材料
2014/05/02 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers