[jqGrid] 横スクロールバーを表示する – コピペで使える JavaScript逆引きリファレンス

jqGridで横スクロールバーを表示するサンプルです

サンプルソース

例）横スクロールバーを表示する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jqGrid横スクロールバーを表示するサンプル</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://js.cybozu.com/jqgrid/v5.1.1/js/jquery.jqGrid.min.js"></script>
<script src="https://js.cybozu.com/jqgrid/v5.1.1/js/i18n/grid.locale-ja.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://js.cybozu.com/jqgrid/v5.1.1/css/ui.jqgrid.css">
<script>
$(document).ready(function(){
  //表示データ
  var dt = [
     {cd:"A001", nm:"鈴木", age:30, post:"100-1111", addr:"AAA", tel:'111-111-1111', fax:'111-111-0000'}
    ,{cd:"A002", nm:"佐藤", age:25, post:"200-2222", addr:"AAA", tel:'222-222-2222', fax:'222-222-0000'}
    ,{cd:"A003", nm:"高橋", age:40, post:"300-3333", addr:"AAA", tel:'333-333-3333', fax:'333-333-0000'}
    ,{cd:"A004", nm:"田中", age:55, post:"500-5555", addr:"AAA", tel:'555-555-5555', fax:'555-555-0000'}
    ,{cd:"A005", nm:"伊藤", age:35, post:"600-6666", addr:"AAA", tel:'666-666-6666', fax:'666-666-0000'}
    ,{cd:"A006", nm:"山田", age:45, post:"800-8888", addr:"AAA", tel:'888-888-8888', fax:'888-888-0000'}
  ];

  //表示設定
  $("#grid01").jqGrid({
     data: dt
    ,datatype: 'local'
    ,colNames:['CD', '名前', '年齢', '郵便番号', '住所', 'TEL', 'FAX']
    ,colModel:[
        {index:'cd', name:'cd', width:'60px', align:'center'}
       ,{index:'nm', name:'nm', width:'120px', align:'left'}
       ,{index:'age', name:'age', width:'40px', align:'right'}
       ,{index:'post', name:'post', width:'80px', align:'center'}
       ,{index:'addr', name:'addr', width:'200px', align:'left'}
       ,{index:'tel', name:'tel', width:'100px', align:'left'}
       ,{index:'fax', name:'fax', width:'100px', align:'left'}
     ]
    ,rownumbers:true
    ,width:400          //幅を指定
    ,shrinkToFit:false  //列幅を自動調整しない
    ,caption:'ユーザ一覧'
  });

});
</script>
</head>
<body>
  <table id="grid01"></table>
</body>
</html>

<!DOCTYPE html>

<head>

<title>jqGrid横スクロールバーを表示するサンプル</title>

$(document).ready(function(){

//表示データ

var dt = [

{cd:"A001", nm:"鈴木", age:30, post:"100-1111", addr:"AAA", tel:'111-111-1111', fax:'111-111-0000'}

,{cd:"A002", nm:"佐藤", age:25, post:"200-2222", addr:"AAA", tel:'222-222-2222', fax:'222-222-0000'}

,{cd:"A003", nm:"高橋", age:40, post:"300-3333", addr:"AAA", tel:'333-333-3333', fax:'333-333-0000'}

,{cd:"A004", nm:"田中", age:55, post:"500-5555", addr:"AAA", tel:'555-555-5555', fax:'555-555-0000'}

,{cd:"A005", nm:"伊藤", age:35, post:"600-6666", addr:"AAA", tel:'666-666-6666', fax:'666-666-0000'}

,{cd:"A006", nm:"山田", age:45, post:"800-8888", addr:"AAA", tel:'888-888-8888', fax:'888-888-0000'}

];

//表示設定

$("#grid01").jqGrid({

data: dt

,datatype: 'local'

,colNames:['CD', '名前', '年齢', '郵便番号', '住所', 'TEL', 'FAX']

,colModel:[

{index:'cd', name:'cd', width:'60px', align:'center'}

,{index:'nm', name:'nm', width:'120px', align:'left'}

,{index:'age', name:'age', width:'40px', align:'right'}

,{index:'post', name:'post', width:'80px', align:'center'}

,{index:'addr', name:'addr', width:'200px', align:'left'}

,{index:'tel', name:'tel', width:'100px', align:'left'}

,{index:'fax', name:'fax', width:'100px', align:'left'}

]

,rownumbers:true

,width:400 //幅を指定

,shrinkToFit:false //列幅を自動調整しない

,caption:'ユーザ一覧'

});

</script>

</head>

<body>

</body>

</html>

実行サンプル

サンプル

解説

横スクロールバーを表示するには、widthで横幅を固定した上で、shrinkToFit:falseを指定すればOKです。
shrinkToFit:falseを指定すると、列幅を自動調整しなくなるためwidth値を超える分はスクロール表示となります。
jqGridのその他のオプションについては以下ページをご覧ください。
⇒ [jqGrid] 主要オプション一覧
固定列を設定したい場合は、以下ページをご覧ください。
⇒[jqGrid] 固定列を作成する