登录  /  注册

关于PHP – EasyUI DataGrid 资料存的方法介绍

不言
发布: 2018-06-22 10:57:05
原创
1078人浏览过

这篇文章主要介绍了关于php – easyui datagrid 资料存的方法介绍,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

继上篇文章 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[&#39;type&#39;]) ) 
{ 
require_once(".\..\db\DB_config.php"); 
require_once(".\..\db\DB_class.php"); 
$db = new DB(); 
$db->connect_db($_DB[&#39;host&#39;], $_DB[&#39;username&#39;], $_DB[&#39;password&#39;], $_DB[&#39;dbname&#39;]); 
$tablename = "STUser"; 
$type = $_REQUEST[&#39;type&#39;]; 
if($type == "del") 
{ 
$id = $_REQUEST[&#39;id&#39;]; 
$sql = "delete from STUser where UNum=$id"; 
$result = $db->query($sql); 
}else if($type == "data"){ 
$page = isset($_POST[&#39;page&#39;]) ? intval($_POST[&#39;page&#39;]) : 1; 
$rows = isset($_POST[&#39;rows&#39;]) ? intval($_POST[&#39;rows&#39;]) : 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[&#39;STUID&#39;]; 
$Password = $_REQUEST[&#39;Password&#39;]; 
$Nickname = $_REQUEST[&#39;Nickname&#39;]; 
$Birthday = $_REQUEST[&#39;Birthday&#39;]; 
if (!empty($_REQUEST[&#39;id&#39;]) ) { 
$id = $_REQUEST[&#39;id&#39;]; 
$sql = "update $tablename set STUID=&#39;$STUID&#39;,Password=&#39;$Password&#39;,Nickname=&#39;$Nickname&#39; where UNum=$id"; 
}else{ // is add 
$sql = "insert into $tablename (STUID, Password, Nickname, DBSTS) values(&#39;$STUID&#39;,&#39;$Password&#39;,&#39;$Nickname&#39;, &#39;A&#39;)"; 
} 
$result = $db->query($sql); 
} 
} 
if($type != "data") 
{ 
if ($result == "true"){ 
echo json_encode(array(&#39;success&#39;=>true)); 
} else { 
echo json_encode(array(&#39;msg&#39;=>&#39;had errors occured. &#39; . $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(){ 
$(&#39;#dlg&#39;).dialog(&#39;open&#39;).dialog(&#39;setTitle&#39;,&#39;New User&#39;); 
$(&#39;#fm&#39;).form(&#39;clear&#39;); 
url = &#39;dal_user.php?type=add&#39;; 
} 
function editUser(){ 
var row = $(&#39;#myDG&#39;).datagrid(&#39;getSelected&#39;); 
if (row){ 
if(typeof(row.UNum) !== &#39;undefined&#39;) 
{ 
$(&#39;#dlg&#39;).dialog(&#39;open&#39;).dialog(&#39;setTitle&#39;,&#39;Edit User&#39;); 
$(&#39;#fm&#39;).form(&#39;load&#39;,row); 
url = &#39;dal_user.php?type=mod&id=&#39;+row.UNum; 
}else{ 
alert("undefined"); 
} 
} 
} 
function saveUser(){ 
$(&#39;#fm&#39;).form(&#39;submit&#39;,{ 
url: url, 
onSubmit: function(){ 
//alert(&#39;sub :&#39;+ url); 
return $(this).form(&#39;validate&#39;); 
}, 
success: function(result){ 
var result = eval(&#39;(&#39;+result+&#39;)&#39;); 
//alert(result.success); 
if (result.success){ 
$(&#39;#dlg&#39;).dialog(&#39;close&#39;); // close the dialog 
$(&#39;#myDG&#39;).datagrid(&#39;reload&#39;); // reload the user data 
} else { 
$.messager.show({ 
title: &#39;Error&#39;, 
msg: result.msg 
}); 
} 
} 
}); 
} 
function removeUser(){ 
var row = $(&#39;#myDG&#39;).datagrid(&#39;getSelected&#39;); 
if (row){ 
$.messager.confirm(&#39;Confirm&#39;,&#39;Are you sure you want to remove this user?&#39;,function(r){ 
if (r){ 
//alert(row.UNum); 
$.post(&#39;dal_user.php&#39;, {type:&#39;del&#39;, id:row.UNum}, function(result){ 
if (result.success){ 
$(&#39;#myDG&#39;).datagrid(&#39;reload&#39;); // reload the user data 
} else { 
$.messager.show({ // show error message 
title: &#39;Error&#39;, 
msg: result.msg 
}); 
} 
},&#39;json&#39;); 
} 
}); 
} 
} 
</script> 
</head> 
<body> 
<h2>easyUI datagrid url 存取測試</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> 
<p 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> 
</p> 
<p id="dlg" class="easyui-dialog" style="width:400px;height:350px;padding:10px 20px" 
closed="true" buttons="#dlg-buttons"> 
<p class="ftitle">User Information</p> 
<form id="fm" method="post" novalidate> 
<p class="fitem"> 
<label>User ID:</label> 
<input name="STUID" class="easyui-validatebox" required="true"> 
</p> 
<p class="fitem"> 
<label>Password:</label> 
<input name="Password" class="easyui-validatebox" required="true"> 
</p> 
<p class="fitem"> 
<label>Nickname:</label> 
<input name="Nickname"> 
</p> 
<p class="fitem"> 
<label>Birthday:</label> 
<input name="Birthday" class="easyui-validatebox" validType="email"> 
</p> 
</form> 
</p> 
<p 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:$(&#39;#dlg&#39;).dialog(&#39;close&#39;)">Cancel</a> 
</p> 
</body> 
</html>
登录后复制

运作结果画面如下所示:

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

PHP实现微信小程序上图片选择及上传到服务器和预览

php中如何通过虚代理实现延迟加载

以上就是关于PHP – EasyUI DataGrid 资料存的方法介绍的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号