jqGrid の最新リリース4.8 の変更点で影響あるのはロードする言語ファイルを regional パラメータをセットしないといけなくなった点です。たとえば grid.locale-ja.js をロードするなら：
$(“#jqGrid”).jqGrid({
…
regional : ‘ja’,
…
});
これをしないと、”undefined” エラーになってしまいます。
詳細はリリースノートを参考にしてください。
カテゴリー
カテゴリー: jqGrid
jqGrid の検索機能では検索条件を $_GET パラメータとして渡されます。
検索パラメータは以下の３つです。
searchField: 検索フィールド searchOper: 検索条件(演算子) searchString: 検索する値
例えば searchField が “ID”、searchOper が “eq”、searchString が “100” ならば SQL 文に置き換えると ID = 100 という Where 句になります。
ということは、searchOper に入ってくる値にはどんなものがあるかを知っている必要があります。
そこで調べました。以下の簡単な jqGrid とナビゲーションバーに検索ボタンを表示させ、検索ボタンをクリックすると、デフォルトでは以下の検索ダイアログが表示されます。
どの演算子を表示させるかは、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’] で渡される値です。
※ 「次に含まれる」、「次を含む」と「次に含まれない」、「次を含まない」は同じですね。
参考：https://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;
}
参考：https://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 のダウンロード
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
別館のjqGrid をローカル配列で使用したインライン編集を行うサンプルで、グリッドの列のソートを行ったときにセルに入力したデータが保持されないという現象がありました。 ==> https://www.northwind.mydns.jp/samples/jqgrid_sample7.php
jqGrid の定義のところで、
scroll:true
オプションを削除すると回避できます。