HARD DAY'S NIGHT別館

当サイトへお越しいただきありがとうございます。 実務に生かせるような技術・ライブラリを使った簡単なサンプルを公開してゆきます。

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>
	

関連リンク