jqGrid 行データフォーム編集・サーバー送信 サンプル
グリッドのセル内のデータの編集を入力フォームで行い、サーバーへポストする方法をご紹介します。
グリッド内に新しいデータを追加するには、「新規」ボタンをクリック
編集または削除をするには、対象のデータをクリックして選択し、「編集」、「削除」ボタンをクリックします。
データを入力して、内容をチェックし、OKならばサーバーへポストします。ポストが完了すると内容を表示します。
送信されたデータは、jqgrid_postrow.php（ソース）で処理をします。このサンプルは送信された内容をテキストとして表示します。
実務ではデータベースへ書き込むなど処理します。
コード
jQuery(document).ready(function()
{
$("input:submit, a, button", ".toolbar").button();
// フォームのフィールド検査
function checkLength(o, min, max) {
if (o.length > max || o.length < min) {
return false;
}
return true;
}
// グリッド内の各フィールドデータの検査
function checkFields(postdata) {
var success = true;
var message = "保存します。";
// ポストされるデータは配列で渡されます。
var id = postdata['rid'];
var modelcd = postdata['model'];
var modelnm = postdata['model_name'];
success = checkLength(id, 4, 10);
if (!success) {
message = "IDは 4 ～ 10 文字で入力してください。";
return[success,message];
}
success = checkLength(modelcd, 4, 10);
if (!success) {
message = "モデルは 4 ～ 10 文字で入力してください。";
return[success,message];
}
success = checkLength(modelnm, 1, 50);
if (!success) {
message = "モデル名は 1 ～ 50 文字で入力してください。";
return[success,message];
}
// 検査結果を配列[boolean,string]で返します。
return[success,message];
}
// 追加ボタンのイベントハンドラー
$("#newuser").click(function() {
jQuery("#list").jqGrid('editGridRow',"new",{
height:'auto',
modal:true, // モーダル表示にします。
addCaption:"追加", // フォームのキャプションを設定
bSubmit:"保存", // フォーム内に表示する確定ボタンのキャプション
bCancel:"キャンセル", // フォーム内に表示する取消ボタンのキャプション
reloadAfterSubmit:false, // cellsubmit: 'clientArray'なのでサブミット後データを再読み込みしない
beforeSubmit:function(postdata, formid) {
// 確定直前のイベント処理
// 入力データのチェックをします。
// 配列[boolean,string]を返します。
return checkFields(postdata);
},
afterComplete:function(response, postdata, formid) {
// 追加が完了した時のイベント処理
alert("ポストされた内容:\n" + response.responseText);
}
});
return false;
});
// 編集ボタンのイベントハンドラー
$("#edituser").click(function() {
var rowid = jQuery("#list").jqGrid('getGridParam','selrow');
if (rowid != null) {
jQuery("#list").jqGrid('editGridRow',rowid,{
height:'auto',
modal:true, // モーダル表示にします。
editCaption:"編集", // フォームのキャプションを設定
bSubmit:"更新", // フォーム内に表示する確定ボタンのキャプション
bCancel:"キャンセル", // フォーム内に表示する取消ボタンのキャプション
reloadAfterSubmit:false, // cellsubmit: 'clientArray'なのでサブミット後データを再読み込みしない
beforeSubmit:function(postdata, formid) {
// 確定直前のイベント処理
// 入力データのチェックをします。
// 配列[boolean,string]を返します。
return checkFields(postdata);
},
afterComplete:function(response, postdata, formid) {
// 編集が完了した時のイベント処理
alert("ポストされた内容:\n" + response.responseText);
}
});
} else {
alert("編集するデータを選択してください。");
}
return false;
});
// 削除ボタンのイベントハンドラー
$("#deluser").click(function() {
var rowid = jQuery("#list").jqGrid('getGridParam','selrow');
if (rowid != null) {
jQuery("#list").jqGrid('delGridRow',rowid,{
modal:true, // モーダル表示にします。
caption:"削除", // フォームのキャプションを設定
msg:"選択したデータを削除しますか？", // フォーム内に表示するメッセージ
bSubmit:"はい", // フォーム内に表示する確定ボタンのキャプション
bCancel:"いいえ", // フォーム内に表示する取消ボタンのキャプション
reloadAfterSubmit:false, // cellsubmit: 'clientArray'なのでサブミット後データを再読み込みしない
afterComplete:function(response, postdata, formid) {
// 削除が完了した時のイベント処理
alert("ポストされた内容:\n" + response.responseText);
}
});
} else {
alert("削除するデータを選択してください。");
}
return false;
});
var mydata = [
{rid:"1", model:"ZX-1", model_name:"クリックして名前を入れてください。"},
{rid:"2", model:"AX-100", model_name:"クリックして名前を入れてください。"},
{rid:"3", model:"T-1000", model_name:"クリックして名前を入れてください。"},
{rid:"4", model:"T-1001", model_name:"クリックして名前を入れてください。"},
{rid:"5", model:"T-1002", model_name:"クリックして名前を入れてください。"},
{rid:"6", model:"T-1003", model_name:"クリックして名前を入れてください。"},
{rid:"7", model:"T-1004", model_name:"クリックして名前を入れてください。"},
{rid:"8", model:"T-1005", model_name:"クリックして名前を入れてください。"},
{rid:"9", model:"T-1006", model_name:"クリックして名前を入れてください。"},
{rid:"10", model:"T-1007", model_name:"クリックして名前を入れてください。"},
{rid:"11", model:"T-1008", model_name:"クリックして名前を入れてください。"}
];
jQuery("#list").jqGrid({
data: mydata,
datatype: "local",
colNames:['ID', '型式', '名称'],
colModel:[
{index:'rid', name:'rid', width:50, editable:true },
{index:'model', name:'model', width:150, editable:true },
{index:'model_name', name:'model_name', width:250, editoptions:{maxlength:50}, editable:true },
],
width: 450,
height: 'auto',
cellEdit: false, // false: セルの直接編集はしない
autoencode: true, // true: データをエンコード
cellsubmit: 'clientArray',
editurl: 'jqgrid_postrow.php', // 編集内容をサーバーへポストします
rowNum: 20,
scroll:true,
sortname: 'rid',
sortorder: "ASC",
multiselect: false, // false: 単一選択
caption: '製品一覧'
});
});
HTMLコード
<table id="list">
</table>
<div class="toolbar">
<button id="newuser">新規</button>
<button id="edituser">編集</button>
<button id="deluser">削除</button>
</div>