À propos de PHP – Introduction à la méthode de stockage de données EasyUI DataGrid

Cet article présente principalement la méthode de stockage des données en PHP - EasyUI DataGrid. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Suite à l'article précédent PHP -. Cet article continue de décrire la méthode d'acquisition de données EasyUI DataGrid, comment faire fonctionner le DataGrid, stocker les données dans la base de données et implémenter l'architecture MVC pour séparer la couche de données et fonctionner de manière indépendante.
Cet article est principalement une amélioration de l'exemple original d'EasyUI DataGrid Créer une application CRUD avec jQuery EasyUI.

Des exemples officiels ont montré comment exploiter les données, mais un problème est que chaque action que vous souhaitez entreprendre pour exploiter les données nécessite un programme correspondant, comme l'ajout, la suppression, la modification et pour obtenir des données, un total de au moins quatre programmes correspondants sont nécessaires pour fonctionner.

Les lecteurs peuvent y réfléchir, il ne s'agit que de la maintenance de base des données d'un seul utilisateur. Généralement, le système dispose de plus d'une douzaine, voire de dizaines de programmes, exploitant uniquement les données de base, donc cette méthode est vouée à le faire. be Il faut des améliorations pour que cela fonctionne dans la pratique.
Selon l'esprit de la préface à la conception d'architecture multi-niveaux, vous pouvez constater que ces quatre programmes sont en fait similaires à chaque opération de base sur les données, ils peuvent donc être standardisés et utilisés comme un cadre fixe, pour une utilisation similaire. programmes plus tard.

Cette partie sera divisée en plusieurs articles pour compléter progressivement chaque processus. A travers ce processus d'évolution progressive, nous comprendrons comment se forme le cadre.
Tout d'abord, cet article présentera comment intégrer quatre programmes dispersés dans un seul programme à appeler. Avant de poursuivre la lecture, les lecteurs peuvent d'abord comprendre la méthode de récupération de données en PHP - EasyUI DataGrid et l'exemple officiel de Build CRUD Le fonctionnement. La méthode d'application avec jQuery EasyUI doit au moins être capable d'exécuter l'exemple. L'action d'exécution est très importante. Ce n'est qu'en le testant vous-même que vous pourrez comprendre les points problématiques.

Pour pouvoir changer quatre programmes en un seul programme à faire fonctionner, la clé est en fait très simple, qui est de changer l'url appelée lors de chaque opération pour appeler le programme DAL dal_user.php, puis Avant d'appeler, vous doit passer un paramètre de type pour indiquer à Dal quelle action vous souhaitez effectuer.
Actuellement, le type définit les quatre actions suivantes :
ajouter un nouveau
mod modifier
supprimer
données obtenir des données
Après avoir compris quelles actions vous voulez que Dal fasse, vous pouvez commencer à écrire Programme .dal. Bien sûr, ce programme dal est toujours un programme non standard, mais il a atteint l'esprit de MVC et a séparé la couche d'accès aux données de la couche de présentation. Dans les articles suivants, je présenterai comment présenter cet article. . Programme pour standardiser la couche de présentation Dal et 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)); 
} 
} 
?>

Une fois la couche d'accès aux données dal définie, vous pouvez implémenter l'interface utilisateur pour appeler dal. Parce qu'AJAX est utilisé pour accéder aux données, MVC fait partie du contrôle. La couche est placée dans la couche d'interface. Cette partie peut être standardisée ultérieurement à l'aide de JavaScript, et l'appel du paramètre est transmis via le backend php. De cette manière, tous les droits de contrôle sont toujours disponibles, concentrés dans un seul programme, ceux-ci seront introduits ultérieurement. articles, nous allons donc nous arrêter ici pour l'instant.
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>

L'écran de résultat de l'opération est le suivant :

Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'apprentissage de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

PHP implémente la sélection d'images sur le mini-programme WeChat, les téléchargements sur le serveur et les aperçus

Comment utiliser PHP Implémenter le chargement paresseux via un proxy virtuel

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!