PHP – EasyUI DataGrid データ保存方法の紹介

ホームページ

php教程

php手册

PHP – EasyUI DataGrid データ保存方法の紹介_php の基本

PHP中文网

May 16, 2016 am 09:00 AM

easyui

前回の記事「php - easyui datagrid データ取得方法」に続き、この記事では引き続き datagrid の操作方法、データベースへのデータの保存方法、mvc アーキテクチャの実装方法について説明します。データ層を分離し、独立して動作します。

この記事は主に、オリジナルの easyui datagrid サンプル「build crud application with jquery easyui」を改良したものです。

公式の例ではデータの操作方法を示していますが、問題の 1 つは、データを操作するために実行するアクションごとに、追加、削除、変更など、対応するプログラムが必要であることです。データの取得だけでなく、、動作するには合計少なくとも 4 つの対応するプログラムが必要です。

読者の皆さんも考えていただければと思いますが、これは 1 人のユーザーの基本的なデータのメンテナンスにすぎません。通常、システムには基本的なデータのためだけに動作するプログラムが十数個、場合によっては数十個あります。実際に機能する前に改善する必要があります。
マルチレベルアーキテクチャ設計の序文の精神によれば、これら 4 つのプログラムは実際にはそれぞれの基本的なデータ操作に似ているため、標準化して、同様のプログラムで使用するための固定フレームワークとして使用できることがわかります。後で。

この部分はいくつかの記事に分けて各プロセスを段階的に完成させ、この段階的な進化のプロセスを通じてフレームワークがどのように形成されるかを理解していきます。
まず、この記事では、分散した 4 つのプログラムを 1 つのプログラムに統合して呼び出す方法を紹介します。読み進める前に、読者はまず、php でのデータ取得の方法 – easyui datagrid と公式サンプル build the を理解することができます。 jquery easyui による crud アプリケーションの操作方法少なくともサンプルを実行できる必要があります実行アクションは非常に重要です見るだけではなく、自分でテストして初めて問題点を理解できます

4 つのプログラムを 1 つのプログラムに変更して操作できるようにするためのキーは、実際には非常に簡単です。各操作中に呼び出される url を変更して、すべてのプログラムが dal_user.php を呼び出すようにすることです。 dal 側次に、呼び出す前に、実行するアクションを dal に伝えるために型パラメータを渡す必要があります。
現在、type は次の 4 つのアクションを定義しています
add new
mod edit
del delete
data get 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 データアクセスレイヤーを定義したら、dal を呼び出す ui インターフェイスを実装できます。データへのアクセスには ajax が使用されるため、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 id="easyUI-datagrid-url-存取測試">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>

操作結果画面は次のとおりです。