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: "名前1", note: "メモ1", amount: "200.00", tax: "10.00", total: "210.00" }, { id: "2", invdate: "2007-10-02", name: "名前2", note: "メモ2", amount: "300.00", tax: "20.00", total: "320.00" }, { id: "3", invdate: "2007-09-01", name: "名前3", note: "メモ3", amount: "400.00", tax: "30.00", total: "430.00" }, { id: "4", invdate: "2007-10-04", name: "名前4", note: "メモ4", amount: "200.00", tax: "10.00", total: "210.00" }, { id: "5", invdate: "2007-10-05", name: "名前5", note: "メモ5", amount: "300.00", tax: "20.00", total: "320.00" }, { id: "6", invdate: "2007-09-06", name: "名前6", note: "メモ6", amount: "400.00", tax: "30.00", total: "430.00" }, { id: "7", invdate: "2007-10-04", name: "名前7", note: "メモ7", amount: "200.00", tax: "10.00", total: "210.00" }, { id: "8", invdate: "2007-10-03", name: "名前8", note: "メモ8", amount: "300.00", tax: "20.00", total: "320.00" }, { id: "9", invdate: "2007-09-01", name: "名前9", note: "メモ9", 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