最近、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'
で、これが無いとナビゲーションバーが表示されない。
0件のコメント