jqGrid の簡単導入

jqGrid の使用方法について jqGrid を試してみる(導入編) でふれましたが、必要なファイル構成をわかりやすくまとめました。

1. jQuery 1.11.2 と jQuery UI 1.11.2 インストール

上記投稿をご覧ください。

2. jqGrid のダウンロード

http://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. 動作確認
http://www.northwind.mydns.jp/dev/jqdemo/jqgrid.html

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください