jQueryのEasyUIアプリケーション - CRUDアプリケーションの作成
データ収集とデータの適切な管理が必要な一般的なネットワークアプリケーションです。 CRUDは、私たちは、ページおよび編集されたデータベースレコードの一覧を生成することができます。 このチュートリアルでは、CRUDデータグリッドを実装するjQueryのEasyUIフレームワークを使用する方法を示しています。
我々は、以下のプラグインを使用します。
- データグリッド：ユーザにデータのリストを表示します。
- ダイアログ：シングルユーザー情報を作成または編集します。
- 形式：データを送信するためのフォーム。
- メサジェ：いくつかの動作情報を表示します。
ステップ1：データベースの準備
当社は、ユーザー情報を格納するためにMySQLデータベースを使用します。 データベースと「ユーザー」の表を作成します。
ステップ2：ユーザー情報を表示するデータグリッドを作成します。
JavaScriptコードのデータグリッドなしで作成。
<表のid = "DG"タイトル= "マイユーザー"クラス= "easyui-データグリッド"スタイル= "幅：550px;高さ：250ピクセル" URL = "get_users.php" ツールバー= "＃ツールバー」 rownumbers = "true"をfitColumns = "true"をsingleSelect = "真"> <THEAD> <TR> <Thのフィールド= "姓"幅= "50">姓</目> <Thのフィールド= "姓"幅= "50">姓</目> <Thのフィールド= "電話"幅= "50">電話</目> <Thのフィールド= "メール"幅= "50">メール</目> </ TR> </ THEAD> </表> <DIVのID = "ツールバー"> <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">新しいユーザーします</a> <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">ユーザーの編集します</a> <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">ユーザーを削除します</a> </ DIV>
我々は、以下に示すように、ユーザリストに表示することができ、任意のJavaScriptコードを記述する必要はありません。
サーバーからデータを取得するために使用される「URL」プロパティおよび割り当てられた「get_users.php 'を使用してデータグリッド。
コードget_users.phpファイル
$ルピー=するmysql_query（ 'ユーザーからの選択*'）;
$結果=配列（）;
一方、（$行= mysql_fetch_object（$ RS））{
array_push（$結果、$行）。
}
エコーjson_encode（$結果）;
ステップ3：フォームの作成]ダイアログボックス
私たちは、ユーザーを作成または編集するには、同じダイアログボックスを使用します。
<DIV ID = "DLG"クラス= "easyui-ダイアログ"スタイル= "幅：400ピクセル;高さ：280px;パディング：10pxの20ピクセル"
クローズド= "true"のボタン= "＃のDLG-ボタン">
<DIVクラス= "ftitle">ユーザー情報</ DIV>
<フォームID = "FM"メソッド= "ポスト">
<DIVクラス= "fitem">
<ラベル>ファーストネーム：</ label>は
<入力名= "姓"クラス= "easyui-validatebox" = "true"が必要>
</ DIV>
<DIVクラス= "fitem">
<ラベル>姓：</ label>は
<= "true"に必要な入力名= "姓"クラス= "easyui-validatebox">
</ DIV>
<DIVクラス= "fitem">
<ラベル>電話：</ label>は
<入力名= "電話">
</ DIV>
<DIVクラス= "fitem">
<ラベル> Eメール：</ label>は
<入力名= "メール"クラス= "easyui-validatebox「validType ="メール ">
</ DIV>
</フォーム>
</ DIV>
<DIVのID = "DLG-ボタン">
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">保存します</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')"> </a>のキャンセル
</ DIV>
このダイアログは、作成、また、任意のJavaScriptコードされています：
ステップ4：達成、ユーザーの作成と編集
ユーザーを作成すると、ダイアログボックスを開き、フォームデータを消去します。
機能NEWUSER（）{
$（ '＃DLG」）ダイアログ（'オープン '）ダイアログ（'のsetTitle '、'新しいユーザー '）..;
。$（ '＃Fmの'）フォーム（ '明確な'）;
URL = 'save_user.php';
}
ユーザーを編集する場合、ダイアログボックスが開き、データグリッドで選択された行からフォームデータをロードします。
VAR行= $（ '＃のDG'）データグリッド（ 'getSelected'）;
{（行）の場合
$（ '＃DLG」）ダイアログ（'オープン '）ダイアログ（'のsetTitle '、'ユーザーの編集 '）..;
。$（ '＃Fmの'）フォーム（ '負荷'、行）。
URL = 'update_user.phpのid =？' + row.id。
}
ユーザデータはURLアドレスを保存するときに「URL」のリターンフォームが格納されています。
ステップ5：ユーザーデータを保存
我々は、ユーザーデータを保存するには、次のコードを使用します。
機能saveUser（）{
$（ '＃Fmの'）。フォーム（ '提出'、{
URL：urlには、
onSubmit：関数（）{
リターン$（この）.FORM（ '検証'）;
}、
成功：関数（結果）{
VARの結果は=のeval（ '（' + +結果として '）'）;
{（result.errorMsg）の場合
$ .messager.show（{
タイトル：「エラー」、
MSG：result.errorMsg
}）;
}エルス{
$（ '＃DLG」）ダイアログ（'近い '）;. //ダイアログを閉じます
$（ '＃Dgを'）データグリッド（ 'リロード'）;. //ユーザデータをリロード
}
}
}）;
}
フォームを送信する前に、「をonSubmit '関数は、関数がフォームフィールドの値を確認するために使用される、と呼ばれています。 フォームフィールドの値が正常に送信された場合、ダイアログを閉じ、データグリッドのデータをリロードしてください。
ステップ6：ユーザーを削除
私たちは、ユーザーを削除するには、次のコードを使用します。
関数destroyUser（）{
VAR行= $（ '＃のDG'）データグリッド（ 'getSelected'）;
{（行）の場合
$の.messager.confirm（ '確認'、 'あなたは、このユーザーを破棄してもよろしいですか？'、関数（R）{
{（R）の場合
$ .post（ 'Destroy_user.php'、{ID：row.id}、関数（結果）{
{（result.success）の場合
$（ '＃Dgを'）データグリッド（ 'リロード'）;. //ユーザデータをリロード
}エルス{
$ .messager.show（{//表示するエラーメッセージ
タイトル：「エラー」、
MSG：result.errorMsg
}）;
}
}、 'JSON'）;
}
}）;
}
}
行を削除する前に、私たちは、ユーザが実際にデータの行を削除するかどうかを決めることができます確認のダイアログボックスが表示されます。 データが正常に削除された後、データグリッドのデータをリフレッシュするには、「リロード」メソッドを呼び出します。
ステップ7：コード実行
MySQLを開き、ブラウザでコードを実行します。