jQueryのEasyUIアプリケーション - CRUDデータグリッドを作成します

前のセクションでは、我々は、作成するCRUDアプリケーションおよび編集ユーザー情報を作成するためのダイアログ（対話）のコンポーネントを使用しています。 このチュートリアルでは、CRUDデータグリッド（DataGridの）を作成する方法を紹介します。 我々は、使用するプラグインを編集可能なデータグリッド（DataGridのを）これらのアクションCRUD操作を完了すること。

ステップ1：HTMLタグデータグリッド（DataGridの）を定義

<表のid = "DG"タイトル= "マイユーザー"スタイル= "幅：550px;高さ：250ピクセル"
		ツールバー= "＃ツールバー」idFieldは=" ID "
		rownumbers = "true"をfitColumns = "true"をsingleSelect = "真">
	<THEAD>
		<TR>
			<Thのフィールド= "姓"幅= "50"エディタ= "{タイプ： 'validatebox'オプション：{必要：真}}">姓</目>
			<Thのフィールド= "姓"幅= "50"エディタ= "{タイプ： 'validatebox'オプション：{必要：真}}">姓</目>
			<番目/> <Thのフィールド= "電話"幅= "50"エディタ= "テキスト">電話
			<Thのフィールド= "メール"幅= "50"エディタ= "{タイプ： 'validatebox'オプション：{validType： 'メール'}}">メール</目>
		</ TR>
	</ THEAD>
</表>
<DIVのID = "ツールバー">
	<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')">新規</ A>
	<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">破壊</ A>
	<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">保存</ A>
	<a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">キャンセル</ A>
</ DIV>

ステップ2：編集可能なデータグリッド（DataGridの）を使用します

$（ '＃Dgを'）。Edatagrid（{
	URL： 'get_users.php」、
	saveUrl： 'save_user.php」、
	UPDATEURL： 'update_user.php」、
	destroyUrl： 'destroy_user.php」
}）;

私たちは、データグリッド（DataGridの）を編集するには、 'URL'、 'saveUrl'、 'UPDATEURL'と 'destroyUrl'属性を提供する必要があります：

• URL：サーバからユーザデータを取得します。
• saveUrl：新しいユーザーデータを保存します。
• UPDATEURL：既存のユーザー・データを更新します。
• destroyUrl：既存のユーザーデータを削除します。

ステップ3：サーバの処理コードを書きます

新しいユーザー（save_user.php）を保存します。

$ファーストネーム= $ _REQUEST [ '姓'];
$姓= $ _REQUEST [ '姓'];
$電話= $ _REQUEST [ '電話'];
$メール= $ _REQUEST [ 'メール'];

「conn.php 'を含みます。

$のSql = "ユーザー（ファーストネーム、姓、電話、電子メール）の値（ '$のFIRSTNAME'、 '$の姓'、 '$電話'、 '$電子メール'）に挿入";
@mysql_query（$ sqlを）;
エコーjson_encode（配列（
	「ID」=>にmysql_insert_id（）、
	=> $ firstnameの「ファーストネーム」、
	「姓 '=> $の姓、
	「電話 '=> $電話、
	[メール] => $メール
））;

更新ユーザーは既に（update_user.php）が存在します：

$イド= INTVAL（$ _ REQUEST [ 'ID']）;
$ファーストネーム= $ _REQUEST [ '姓'];
$姓= $ _REQUEST [ '姓'];
$電話= $ _REQUEST [ '電話'];
$メール= $ _REQUEST [ 'メール'];

「conn.php 'を含みます。

$ SQLは、= "更新ユーザーはFIRSTNAME = '$のFIRSTNAME'、姓= '$の姓」、電話=' $電話」、電子メールは= '$電子メール」のid = $ IDを設定します」。
@mysql_query（$ sqlを）;
エコーjson_encode（配列（
	「ID」=> $ IDを、
	=> $ firstnameの「ファーストネーム」、
	「姓 '=> $の姓、
	「電話 '=> $電話、
	[メール] => $メール
））;

ユーザーが既に（destroy_user.php）が存在する削除するには：

$イド= INTVAL（$ _ REQUEST [ 'ID']）;

「conn.php 'を含みます。

$ SQLが= "ID = $ IDをユーザーから削除";
@mysql_query（$ sqlを）;
エコーjson_encode（）配列（ '成功' => TRUE）;

jQueryのEasyUI例をダウンロード

jeasyui-app-crud2.zip