HARD DAY'S NIGHT別館

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

jqGrid ナビゲーションバー(naviGrid) サンプル

jqGrid はグリッドの下部に行の追加、編集、削除、検索を行うためにボタンを配置することができます。

今回は、こちらのサンプルを少し変更して ナビゲーションバー(naviGrid)でデータ編集を入力フォームを表示して行い、
サーバーへポストする方法をご紹介します。

グリッドに新しいデータを追加したり、行を編集、または、削除をするには、ナビゲーションバー上の下記アイコンをクリックします。

追加
編集
削除

グリッド内に新しいデータを追加するには、ナビゲーションバー上の下記アイコンをクリックします。

ポストするためには jqgrid_postrow.php を用意しました。 これはポストされた内容をクライアントに返すだけのプログラムです。
実際にはデータベースへ反映するなどを行います。

コード


jQuery(document).ready(function()
{
    // フォームのフィールド検査
    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];
    }

    var mydata = [
        {rid:"1", model:"ZX-1", model_name:"未設定"},
        {rid:"2", model:"AX-100", model_name:"未設定"},
        {rid:"3", model:"T-1000", 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,
        cellEdit: false,            // false: セルの直接編集はしない
        cellsubmit: 'clientArray',
        editurl: 'jqgrid_postrow.php',  // 編集内容をサーバーへポストします
        autoencode:true,
        rowNum: 10,
        scroll:true,
        sortname: 'rid',
        sortorder: "ASC",
        multiselect: false,         // false: 単一選択
        pager: '#pagertb',          // ページャの ID
        caption: '製品一覧'
    });
    // グリッドとページャの関連付け
    // レコードの削除、追加、編集、検索を無効
    jQuery("#list").jqGrid('navGrid','#pagertb',{ add:false, edit:false, del:false, search:false, refresh:false })
    // 「追加」ボタンを追加
    .navButtonAdd("#pagertb",{
        caption:"",
        buttonicon :'ui-icon-plus',
        onClickButton: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);
                }
            });
        }
    })
    // 「編集」ボタンを追加
    .navButtonAdd("#pagertb",{
        caption:"",
        buttonicon :'ui-icon-pencil',
        onClickButton: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("編集するデータを選択してください。");
            }
        }
    })
    // 「削除」ボタンを追加
    .navButtonAdd("#pagertb",{
        caption:"",
        buttonicon :'ui-icon-trash',
        onClickButton: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("削除するデータを選択してください。");
            }
        }
    });
});
    

HTMLコード


<table id="list">
</table>
<div id="pagertb"/> <!-- ページャ -->
    

関連リンク