HARD DAY'S NIGHT別館

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

jqGrid 列の表示・非表示 サンプル

このサンプルでは、グリッドの列を表示、非表示します。
XML形式データのサンプルをもとにしています。

グリッドの下部の「表示」・「非表示」ボタンをクリックすると「役割」列が表示・非表示されます。


コード


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

    // 列を表示する
    $("#dc").click(function() {
        jQuery("#list").jqGrid('showCol', 'role');
    });

    // 列を隠す
    $("#hc").click(function() {
        jQuery("#list").jqGrid('hideCol', 'role');
    });
    
    // ユーザー設定 - ユーザー一覧
    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', editable:true, edittype:"select", editoptions:{value:"0:スタッフ;9:管理者"}, formatter:'select' },
                   {index:'modified', name:'modified', width: '140', align: 'center', editable:false },
                 ],
        width: 'auto',
        height: 'auto',
        sortname: 'id',
        sortorder: "ASC",
        multiselect: false,
        rowNum:10,
        caption: 'ユーザー一覧'
    });
});
	

HTMLコード


<table id="list">
</table>
<br/>
<div class="toolbar">
    <button type="button" id="dc">表示</button>
    <button type="button" id="hc">非表示</button>
</div>
	

関連リンク