HARD DAY'S NIGHT別館

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

jqGrid 横スクロール サンプル

jqGrid で横スクロールを表示させてみます。横幅のサイズを指定して、 各列がグリッドの横幅に合わせて自動調整されないように shrinkToFit オプションを false にします。

コード


jQuery(document).ready(function()
{
    var mydata = [
        {comp_code:"CD1", comp_name:"株式会社シー", comp_kana:"カブシキカイシャシー"},
        {comp_code:"CD2", comp_name:"ビー株式会社", comp_kana:"ビーカブシキカイシャ"},
        {comp_code:"CD3", comp_name:"有限会社エー", comp_kana:"ユウゲンガイシャエー"},
    ];

    jQuery("#list").jqGrid({
        data: mydata,
        datatype: "local",
        colNames:['コード', '会社名', 'カナ'],
        colModel:[
            {index:'comp_code', name:'comp_code', width:'60px'},
            {index:'comp_name', name:'comp_name', width:'150px'},
            {index:'comp_kana', name:'comp_kana', width:'200px'},
        ],
        height: 'auto',
        width:350,
        shrinkToFit:false,
        sortname: 'comp_code',
        sortorder: "ASC",
        multiselect: false,
        caption: '会社一覧'
    }); 
});
	

HTMLコード


<table id="list">
</table>