jqGrid 4.8

jqGrid の最新リリース4.8 の変更点で影響あるのはロードする言語ファイルを regional パラメータをセットしないといけなくなった点です。たとえば grid.locale-ja.js をロードするなら:

$(“#jqGrid”).jqGrid({

regional : ‘ja’,

});

これをしないと、”undefined” エラーになってしまいます。

詳細はリリースノートを参考にしてください。

jqGridの検索と検索演算子

jqGrid の検索機能では検索条件を $_GET パラメータとして渡されます。

検索パラメータは以下の3つです。

searchField: 検索フィールド
searchOper: 検索条件(演算子)
searchString: 検索する値

例えば searchField が “ID”、searchOper が “eq”、searchString が “100” ならば SQL 文に置き換えると ID = 100 という Where 句になります。

ということは、searchOper に入ってくる値にはどんなものがあるかを知っている必要があります。

そこで調べました。以下の簡単な jqGrid とナビゲーションバーに検索ボタンを表示させ、検索ボタンをクリックすると、デフォルトでは以下の検索ダイアログが表示されます。

jqgrid-search

どの演算子を表示させるかは、jqGrid の各カラムの定義で指定ができるのですが、今回は割愛し、各jqGrid の検索演算子とSQLの演算子の対比表にまとめました。

表示名 searchOperの値 SQL 演算子
次に等しい eq =
次に等くない ne <>
次より小さい lt <
次より等しいか小さい le <=
次より大きい gt >
次より等しいか大きい ge >=
次で始まる bw LIKE ‘%searchStr’
次で始まらない bn NOT LIKE ‘%searchStr’
次で終わる ew LIKE ‘searchStr%’
次で終わらない en NOT LIKE ‘searchStr%’
次を含む in LIKE ‘%searchStr%’
次を含まない ni NOT LIKE ‘%searchStr%’
次に含まれる cn LIKE ‘%searchStr%’
次に含まれない nc NOT LIKE ‘%searchStr%’
is null nu IS NULL
is not null nn IS NOT NULL

※ ‘searchStr’ は $_GET[‘searchString’] で渡される値です。
※ 「次に含まれる」、「次を含む」と「次に含まれない」、「次を含まない」は同じですね。
参考:http://stackoverflow.com/questions/9383267/what-is-the-usage-of-jqgrid-search-is-in-and-is-not-in

<table id="list"></table>
<div id="statusbar"></div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#list").jqGrid({
            datatype: "json",
            url: "getdata.php",
            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 JSON 簡単サンプル"
        });

        // ナビゲーションの検索を有効にする
        jQuery("#list").jqGrid('navGrid','#statusbar',{del:false, add:false, edit:false, search:true});
    });
</script>

jqGrid を URL で指定したデータソースかデータを取得する方法では、データソース側では、これらの検索演算子に応じた検索結果を返さないとなりません。;-)

jqGrid フォント サイズの変更

jqGrid のフォントサイズが小さくなってしまった場合、以下でデフォルトのスタイルを上書きすると調整可能です。

.ui-jqgrid,
.ui-jqgrid .ui-jqgrid-view,
.ui-jqgrid .ui-jqgrid-pager,
.ui-jqgrid .ui-pg-input {
    font-size: 12px;
}
.ui-jqgrid tr.ui-row-ltr td input {
    font-size: 12px;
}
.ui-jqdialog {
    font-size: 12px;
}

参考:http://stackoverflow.com/questions/1677695/how-to-change-the-font-size-in-jqgrid

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

jqGrid ソートを行ったときにセル入力データが保持されない

別館のjqGrid をローカル配列で使用したインライン編集を行うサンプルで、グリッドの列のソートを行ったときにセルに入力したデータが保持されないという現象がありました。 ==> http://www.northwind.mydns.jp/samples/jqgrid_sample7.php

jqGrid の定義のところで、

scroll:true

オプションを削除すると回避できます。