jqGrid の使用方法について jqGrid を試してみる（導入編） でふれましたが、必要なファイル構成をわかりやすくまとめました。
1. jQuery 1.11.2 と jQuery UI 1.11.2 インストール
上記投稿をご覧ください。
2. jqGrid のダウンロード
https://www.trirand.com/blog/?page_id=6 から:
- すべてのチェックボックス選択
- Download ボタンをクリック
デフォルトで Guriddo_jqGrid_JS_4.7.1.zip という名前でダウンロードされます。ダウンロードが完了したら展開します。
展開すると以下のフォルダおよびファイルがあります。
- css ui.jqgrid.css - js -i18n grid.locale-ja.js Changes.txt install.txt jquery-1.11.0.min.js jquery.jqGrid.min.js jquery.jqGrid.src.js + plugins + src
3. サイトへ配置
以下のファイルをサイトへ配置します。
ここでは例として /var/www/html/jqdemo/lib へ配置します。
- js/jquery.jqGrid.min.js
- js/i18n/grid.locale-ja.js
- css/ui.jqgrid.css
4. テスト準備
以下のテスト用ページを作成して /var/www/html/jqdemo/jqgrid.html として配置します。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jqGrid 簡単サンプル</title>
<!-- jQuery -->
<script src="lib/jquery-1.11.2.min.js"></script>
<!-- jQuery UI -->
<script src="lib/jquery-ui.min.js"></script>
<!-- jqGrid -->
<script src="lib/jquery.jqGrid.min.js"></script>
<!-- jqGrid のローカライズ用ファイル - 日本語用 -->
<script src="lib/grid.locale-ja.js"></script>
<!-- jQuery UI の CSS -->
<link href="lib/jquery-ui.min.css" rel="stylesheet">
<!-- jqGrid の CSS -->
<link href="lib/ui.jqgrid.css" rel="stylesheet">
</head>
<body>
<table id="list"></table>
<div id="statusbar"></div>
<script type="text/javascript">
var mydata = [
{ id: "1", invdate: "2007-10-01", name: "名前１", note: "メモ１", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "2", invdate: "2007-10-02", name: "名前２", note: "メモ２", amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "3", invdate: "2007-09-01", name: "名前３", note: "メモ３", amount: "400.00", tax: "30.00", total: "430.00" },
{ id: "4", invdate: "2007-10-04", name: "名前４", note: "メモ４", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "5", invdate: "2007-10-05", name: "名前５", note: "メモ５", amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "6", invdate: "2007-09-06", name: "名前６", note: "メモ６", amount: "400.00", tax: "30.00", total: "430.00" },
{ id: "7", invdate: "2007-10-04", name: "名前７", note: "メモ７", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "8", invdate: "2007-10-03", name: "名前８", note: "メモ８", amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "9", invdate: "2007-09-01", name: "名前９", note: "メモ９", amount: "400.00", tax: "30.00", total: "430.00" }
];
$(document).ready(function () {
$("#list").jqGrid({
datatype: "local",
data: mydata,
height: 250,
width: 780,
colModel: [
{ label: 'No', name: 'id', width: 75, key:true },
{ label: '日付', name: 'invdate', width: 90 },
{ label: 'クライアント', name: 'name', width: 100 },
{ label: '金額', name: 'amount', width: 80 },
{ label: '税', name: 'tax', width: 80 },
{ label: '合計', name: 'total', width: 80 },
{ label: '備考', name: 'note', width: 150 }
],
viewrecords: true, // ページ、件数をツールバー上に表示
pager: "#statusbar",
caption: "jqGrid 簡単サンプル"
});
});
</script>
</body>
</html>
5. 動作確認
https://www.northwind.mydns.jp/dev/jqdemo/jqgrid.html