Mengikuti artikel sebelumnya PHP - kaedah pengambilan data EasyUI DataGrid, artikel ini terus menerangkan cara mengendalikan DataGrid, menyimpan data dalam pangkalan data dan melaksanakan seni bina MVC untuk memisahkan lapisan data dan beroperasi secara bebas.
Artikel ini terutamanya penambahbaikan pada contoh asal EasyUI DataGrid Build CRUD Application with jQuery EasyUI.
Contoh rasmi telah menunjukkan cara mengendalikan data, tetapi satu masalah ialah setiap tindakan yang anda mahu lakukan untuk mengendalikan data memerlukan program yang sepadan, seperti menambah, memadam, mengubah suai dan Untuk mendapatkan data, sejumlah sekurang-kurangnya empat program yang sepadan diperlukan untuk beroperasi.
Pembaca boleh memikirkannya, ini hanyalah penyelenggaraan data asas bagi pengguna tunggal Secara amnya, sistem mempunyai lebih daripada sedozen atau bahkan berpuluh-puluh program yang mengendalikan data asas sahaja, jadi kaedah ini terikat kepada. menjadi Perlu penambahbaikan untuk menjadikannya berfungsi dalam amalan.
Menurut semangat kata pengantar kepada reka bentuk seni bina berbilang peringkat, anda boleh mendapati bahawa empat program ini sebenarnya serupa dengan setiap operasi data asas, jadi ia boleh diseragamkan dan digunakan sebagai rangka kerja tetap , untuk digunakan oleh yang serupa program nanti.
Bahagian ini akan dibahagikan kepada beberapa artikel untuk melengkapkan setiap proses secara beransur-ansur Melalui proses evolusi beransur-ansur ini, kita akan memahami bagaimana rangka kerja itu terbentuk.
Pertama sekali, artikel ini akan memperkenalkan cara mengintegrasikan empat program bertaburan ke dalam satu program untuk dipanggil Sebelum membaca lebih lanjut, pembaca boleh terlebih dahulu memahami kaedah mendapatkan data dalam PHP - EasyUI DataGrid dan contoh rasmi Build CRUD The operation. kaedah Aplikasi dengan jQuery EasyUI sekurang-kurangnya boleh menjalankan contoh Tindakan lari adalah sangat penting.
Untuk dapat menukar empat program menjadi satu program untuk beroperasi, kuncinya sebenarnya sangat mudah, iaitu menukar url yang dipanggil semasa setiap operasi untuk memanggil program DAL dal_user.php, kemudian Sebelum memanggil, anda mesti lulus parameter jenis untuk memberitahu dal tindakan yang ingin anda lakukan.
Taip pada masa ini mentakrifkan empat tindakan berikut:
tambah baharu
ubah suai
del delete
data dapatkan data
Selepas anda memahami tindakan yang anda mahu dal lakukan, anda boleh mula menulis . Program dal Sudah tentu, program dal ini masih merupakan program yang tidak standard, tetapi ia telah mencapai semangat MVC dan memisahkan lapisan akses data daripada lapisan pembentangan, saya akan memperkenalkan cara untuk memperkenalkan artikel ini . Program untuk menyeragamkan dal dan lapisan pembentangan UI.
dal_user.php
Kodnya adalah seperti berikut:
<?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 Selepas lapisan akses data ditentukan , anda boleh Untuk melaksanakan antara muka UI untuk memanggil dal, kerana AJAX digunakan untuk mengakses data, sebahagian daripada lapisan kawalan dalam MVC diletakkan dalam lapisan antara muka Bahagian ini boleh diseragamkan kemudian menggunakan JavaScript php backend, semua kuasa kawalan masih tertumpu dalam satu program ini akan diperkenalkan dalam artikel kemudian, tetapi kami akan berhenti di sini buat masa ini.
datagrid.php
Kod adalah seperti berikut:
<!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 存取測試</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:$('#dlg').dialog('close')">Cancel</a>
</p>
</body>
</html>
Skrin hasil operasi adalah seperti berikut:
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
