HARD DAY'S NIGHT別館

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

jqGrid 横幅のサイズをパーセント指定と同等方法

jqGrid の横幅(width)はピクセル単位となっています。横幅をパーセントで指定する方法と"同等"の方法をご紹介します。

loadComplete イベントで、横幅をパーセントで設定した <div> タグの横幅を取得して
'setGridWidth' 関数の第1引数とします。第2引数は shrinkToFit オプションで、
true をセットすると列幅が自動調整されます。false にすると colModel で指定した横幅で表示されます。

コード


jQuery(document).ready(function()
{
    var mydata = [
            {zip7:"111-0021", pref:"東京都", city:"台東区", town:"日本堤"},
            {zip7:"111-0022", pref:"東京都", city:"台東区", town:"清川"},
            {zip7:"111-0023", pref:"東京都", city:"台東区", town:"橋場"},
            {zip7:"111-0024", pref:"東京都", city:"台東区", town:"今戸"},
            {zip7:"111-0025", pref:"東京都", city:"台東区", town:"東浅草"},
            {zip7:"111-0031", pref:"東京都", city:"台東区", town:"千束"},
            {zip7:"111-0032", pref:"東京都", city:"台東区", town:"浅草"},
            {zip7:"111-0033", pref:"東京都", city:"台東区", town:"花川戸"},
            {zip7:"111-0034", pref:"東京都", city:"台東区", town:"雷門"},
            {zip7:"111-0035", pref:"東京都", city:"台東区", town:"西浅草"},
            {zip7:"111-0036", pref:"東京都", city:"台東区", town:"松が谷"},
            {zip7:"111-0041", pref:"東京都", city:"台東区", town:"元浅草"},
            {zip7:"111-0042", pref:"東京都", city:"台東区", town:"寿"},
            {zip7:"111-0043", pref:"東京都", city:"台東区", town:"駒形"},
            {zip7:"111-0051", pref:"東京都", city:"台東区", town:"蔵前"},
            {zip7:"111-0052", pref:"東京都", city:"台東区", town:"柳橋"},
            {zip7:"111-0053", pref:"東京都", city:"台東区", town:"浅草橋"},
            {zip7:"111-0054", pref:"東京都", city:"台東区", town:"鳥越"},
            {zip7:"111-0055", pref:"東京都", city:"台東区", town:"三筋"}, 
            {zip7:"111-0056", pref:"東京都", city:"台東区", town:"小島"}
    ];

    jQuery("#list").jqGrid({
        data: mydata, datatype: "local",
        colNames:[ '郵便番号', '都道府県', '市区郡', '町村域' ],
        colModel:[ {name:'zip7', width:'100px'},
                    {name:'pref', width:'100px'},
                    {name:'city', width:'100px'},
                    {name:'town', width:'100px'}
        ],
        multiselect: false,
        loadComplete : function () {
        	// div_dummy 枠の横幅を取得してグリッドに設定する
            $("#list").jqGrid('setGridWidth', $(div_dummy).width(), true);
        },
        caption: '住所一覧'
    });
});
	

HTMLコード


<div id="div_dummy" style="width:90%"> <!-- 枠幅を%で指定 -->
    <table id="list">
    </table>
</div>