jqGrid データ編集時に列を読み込み専用サンプル

このサンプルでは、グリッドのデータを編集するときだけ列を読み込み専用にします。
データを新規に追加する時は入力可能にしておいて、編集時は読み込み専用にしたい場合などに使えます。

グリッドの下部の「新規」ボタンをクリックするとデータ編集を入力フォームをポップアップ表示して
「ID」列は入力可能とし、「編集」ボタンをクリックすると「ID」列を読み込み専用にします。

データ編集入力フォーム表示前に「ID」列を読み込み専用する (beforeShowForm イベント)
データ編集入力フォーム閉じる前に「ID」列を編集可能にする (onClose イベント)

ポストするためには jqgrid_postrow.php を用意しました。
これはポストされた内容をクライアントに返すだけのプログラムです。

コード


// ポストされるデータの検証
function validateFields(postdata) {
    var success = true;
    var message = "保存します。";

    // ここでデータを検証してエラーがあれば false を返します。
    // 例）
    // success = false;
    // message = "値が正しくありません。";

    return[success,message];
}

jQuery(document).ready(function()
{
    $("input:submit, a, button", ".toolbar").button();

    // データを追加する
    $("#new").click(function() {
        jQuery("#list").jqGrid('editGridRow','new',{
            height:250,
            modal:true,     // default is false.
            editCaption:"ユーザーの追加",
            reloadAfterSubmit:true,     // default is true.
            checkOnUpdate:false,        // default is false.
            closeAfterAdd:true,         // default is false
            closeAfterEdit:true,        // default is false.
            closeOnEscape:true,         // default is false.
            beforeSubmit:function(postdata, formid) {
                // ポスト前に入力データを検証する
                return validateFields(postdata);
            },
            afterComplete:function(response, postdata, formid) {
                var res = response.responseText;
                // ポストされたデータを表示する
                alert(res);
            }
        });
        return false;
    });

    // データを編集する
    $("#edt").click(function() {
        var rowid = jQuery("#list").jqGrid('getGridParam','selrow');

        if (rowid != null) {
            jQuery("#list").jqGrid('editGridRow',rowid,{
                height:250,
                modal:true,     // default is false.
                editCaption:"ユーザーの編集",
                reloadAfterSubmit:true,     // default is true.
                checkOnUpdate:false,        // default is false.
                closeAfterAdd:true,         // default is false
                closeAfterEdit:true,        // default is false.
                closeOnEscape:true,         // default is false.
           // データ編集入力フォーム表示前に「ID」列を読み込み専用する
                beforeShowForm:function(formid) {
                    // IDフィールドを readonly にする
                    $('#id',formid).attr('readonly','readonly');
                },
           // データ編集入力フォーム閉じる前に「ID」列を編集可能にする
                onClose:function(formid) {
                    // IDフィールドの readonly を解除
                    $('#id',formid).attr('readonly',null);
                },
                beforeSubmit:function(postdata, formid) {
                    // ポスト前に入力データを検証する
                    return validateFields(postdata);
                },
                afterComplete:function(response, postdata, formid) {
                    var res = response.responseText;
                    // ポストされたデータを表示する
                    alert(res);
                }
            });
        } else {
            alert("編集するデータを１つ選択してください。");
        }
        return false;
    });

    // ユーザー設定 - ユーザー一覧
    jQuery("#list").jqGrid({
        url:'jqgrid_getdata.php?datatype=xml',
        datatype: "xml",
        colNames:['ID', '名前', 'フリガナ', '電話番号1', '電話番号2', '役割', '更新日'],
        colModel:[ {index:'id', name:'id', width: '40', align: 'center', editable:true, editoptions:{size:10} },
                   {index:'name', name:'name', width: '110', editable:true, editoptions:{size:20} },
                   {index:'name_furigana', name:'name_furigana', width: '110', editable:true, editoptions:{size:20} },
                   {index:'tel_no1', name:'tel_no1', width: '65', align: 'center', editable:true, editoptions:{size:13} },
                   {index:'tel_no2', name:'tel_no2', width: '65', align: 'center', editable:true, editoptions:{size:13} },
                   {index:'role', name:'role', width: '50', align: 'center', hidden:true, editrules:{ edithidden:true },
                    editable:true, edittype:"select", editoptions:{value:"0:スタッフ;9:管理者"}, formatter:'select' },
                   {index:'modified', name:'modified', width: '140', align: 'center', editable:false },
                 ],
        width: 'auto',
        height: 'auto',
        editurl: 'jqgrid_postrow.php',  // 編集内容をサーバーへポストします
        sortname: 'id',
        sortorder: "ASC",
        multiselect: false,
        rowNum:10,
        caption: 'ユーザー一覧'
    });
});

HTMLコード


<table id="list">
</table>
<br/>
<div class="toolbar">
    <button type="button" id="new">新規</button>
    <button type="button" id="edt">編集</button>
</div>

jqGrid データ編集時に列を読み込み専用 サンプル

コード

HTMLコード

関連リンク

jqGrid データ編集時に列を読み込み専用サンプル