PHP – EasyUI DataGrid データ保存方法紹介_php チュートリアル
- PHP中文网オリジナル
- 2016-07-21 15:14:18770ブラウズ
前回の記事「PHP - EasyUI DataGrid データ取得方法」に続き、この記事では DataGrid の操作方法、データベースへのデータの保存方法、データ層を分離して独立して動作させるための MVC アーキテクチャの実装方法について説明します。
この記事は主に、オリジナルの EasyUI DataGrid サンプル「Build CRUD Application with jQuery EasyUI」を改良したものです。
公式のサンプルではデータの操作方法を説明しましたが、問題の 1 つは、データを操作する各アクション (データの追加、削除、変更、取得など) に対応するプログラムが必要であり、合計で少なくとも 4 つの対応するプログラムが必要であることです。操作するために必要です。
読者の皆さんも考えてみてください。これは 1 人のユーザーの基本的なデータのメンテナンスにすぎません。一般に、システムには基本的なデータのためだけに動作するプログラムが 12 個以上あるため、この方法が機能する前に改善する必要があります。練習する。
マルチレベル アーキテクチャ設計の序文の精神によれば、これら 4 つのプログラムは実際にはそれぞれの基本的なデータ操作に似ているため、標準化して、後で同様のプログラムを使用するための固定フレームワークとして使用できることがわかります。
このパートはいくつかの記事に分けて、各プロセスを徐々に完成させ、この段階的な進化のプロセスを通じて、フレームワークがどのように形成されるかを理解していきます。
まず最初に、この記事では、4 つの分散したプログラムを 1 つのプログラムに統合して呼び出す方法を紹介します。読み進める前に、読者はまず、PHP でのデータ取得の方法である EasyUI DataGrid と、Build CRUD Application の公式サンプルを理解することができます。 jQuery EasyUI の動作方法では、少なくともサンプルを実行できる必要があります。ただ見るだけではなく、問題点を理解することができます。
4 つのプログラムを 1 つのプログラムに変更して操作できるようにするためのキーは、実際には非常に簡単です。つまり、各操作中に呼び出される URL を変更して、すべての DAL 側プログラム dal_user.php を呼び出してから、その前に呼び出します。を呼び出す場合は、型パラメータを渡して、実行したいアクションを dal に伝える必要があります。
現在、type は次の 4 つのアクションを定義しています
add add
modmodify
del delete
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 データ アクセス層が定義されたら、データへのアクセスに AJAX が使用されるため、dal を呼び出す UI インターフェイスを実装できます。したがって、MVC の制御層の一部はインターフェイス層に配置され、この部分は JavaScript を使用して後から標準化でき、パラメーター呼び出しは PHP バックエンドを介して渡されます。このようにして、すべての制御権限が 1 つのプログラムに集中されます。これらについては後の記事で紹介しますが、今回はここまでとします。
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 存取測試</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>
演算結果画面は以下の通りです:
