简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > php教程 > php手册 > 本文

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

PHP中文网
リリース： 2016-05-16 09:00:22
オリジナル
1254 人が閲覧しました

前回の記事「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>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>
ログイン後にコピー


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

関連ラベル：
easyui
ソース：php.cn
前の記事：PHP オブジェクト指向 - modifiers_php の基本へのアクセスの概要 次の記事：PHPファイルシステムの詳しい解説_phpの基本
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1485
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
1650
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1401
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1330
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1382
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！