HARD DAY'S NIGHT別館

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

jqGrid 非表示列を編集時のみ表示 サンプル

このサンプルでは、非表示になっているグリッド列のデータを編集するときだけ表示します。

グリッドの下部の「編集」ボタンをクリックするとデータ編集を入力フォームをポップアップ表示して
「役割」列を表示してデータの編集ができるようにします。

  • 初期表示では「役割」列を非表示 (hidden:true)
  • データ編集入力フォームで「役割」列を表示 (editrule { edithidden:true })

ポストするためには 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();

    // 列を表示して編集する
    $("#ec").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.
                beforeSubmit:function(postdata, formid) {
                    // ポスト前に入力データを検証する
                    return validateFields(postdata);
                },
                afterComplete:function(response, postdata, formid) {
                    var res = response.responseText;
                    // ポストされたデータを表示する
                    alert(res);
                }
            });
        } else {
            alert("編集するデータを1つ選択してください。");
        }
        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} },
           // role: 初期表示では「役割」列を非表示 (hidden:true)
           //       データ編集入力フォームで「役割」列を表示 (editrule { edithidden:true })
                   {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="ec">編集</button>
</div>
	

関連リンク