最近、Struts1.3.10を使ってフレームワークの勉強をしています。画面上でリッチなグリッド表示を利用したくて、jQuery + jqGrid を試してみたのですが、その際の覚書です。

利用したライブラリ

インストールそのものは、上記のファイル群を適当なサイト上のフォルダに放り込むだけでOK。
ちょっと拝借しているコードですが、以下のようなものを入力して表示させる。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" media="screen"
    href="js/jquery/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" media="screen"
    href="js/jqGrid/css/ui.jqgrid.css" />
<script type="text/javascript" src="js/jquery/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/jquery/jquery-ui.js"></script>
<script type="text/javascript" src="js/jqGrid/js/i18n/grid.locale-ja.js"></script>
<script type="text/javascript" src="js/jqGrid/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript">
jQuery(document).ready(function()
	    {
	        var mydata = [
	            {zip7:"110-0000", addr:"東京都台東区以下に掲載がない場合"},
	            {zip7:"110-0001", addr:"東京都台東区谷中"},
	            {zip7:"110-0002", addr:"東京都台東区上野桜木"},
	            {zip7:"110-0003", addr:"東京都台東区根岸"},
	            {zip7:"110-0004", addr:"東京都台東区下谷"},
	            {zip7:"110-0005", addr:"東京都台東区上野"},
	            {zip7:"110-0006", addr:"東京都台東区秋葉原"},
	            {zip7:"110-0007", addr:"東京都台東区上野公園"},
	            {zip7:"110-0008", addr:"東京都台東区池之端"},
	            {zip7:"110-0011", addr:"東京都台東区三ノ輪"},
	            {zip7:"110-0012", addr:"東京都台東区竜泉"},
	            {zip7:"110-0013", addr:"東京都台東区入谷"},
	            {zip7:"110-0014", addr:"東京都台東区北上野"},
	            {zip7:"110-0015", addr:"東京都台東区東上野"},
	            {zip7:"110-0016", addr:"東京都台東区台東"}
	        ];

	        jQuery("#list").jqGrid({
	            data: mydata,
	            datatype: "local",
	            colNames:[
	                '郵便番号', '住所'
	            ],
	            colModel:[
	                {name:'zip7', width:'100px'},
	                {name:'addr', width:'300px'}
	            ],
	            height:'300',
	            width: '550',
	            sortname: 'zip7',
	            sortorder: "ASC",
	            rowNum:20,
	            rowTotal: 2000,
	            regional: 'ja',    // ここをgrid.locale-**.js の**に合わせないと、navGridが表示されない。
	            rowList : [20,30,50],   // グリッドに表示する行数 -- 20行、30行、50行の選択ができる
	            viewrecords: true,
	            gridview: true,
	            pager: '#pager',      // ページャの ID
	            multiselect: false,
	            caption: '住所一覧'
	        });
	        // グリッドとページャの関連付け
	        //    レコードの削除、追加、編集はなし、検索のみ有効
	        jQuery("#list").jqGrid('navGrid','#pager',{del:false, add:false, edit:false, search:true});
	    });
</script>
<title>Insert title here</title>
</head>
<body>
<div>
<table id="list"></table>
<div id="pager"></div>
</div>
</body>
</html>

ここで大事なポイントとして、50行目の
regional: 'ja'
で、これが無いとナビゲーションバーが表示されない。


 
記事を共有する
カテゴリー: javascriptweb

zaturendo

中小企業社内SE。

0件のコメント

コメントを残す

メールアドレスが公開されることはありません。