jqGrid の簡単導入 – HARD DAY'S NIGHT ブログ

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

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル