jqGridでは表のヘッダー部分に入力エリアを設けて絞り込みを行うことが簡単にできます。
プログラミングとしては作成したjqGridの表に「filterToolbar」メソッドでフィルターを追加するだけです。
jqGridの表でフィルタリング(絞り込み）を行う
jqGridでフィルターを追加するには表を作成後「filterToolbar」メソッドを呼び出します。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/free-jqgrid@4.15.4/css/ui.jqgrid.min.css">
<script src="https://cdn.jsdelivr.net/npm/free-jqgrid@4.15.4/js/i18n/min/grid.gendere-de.js"></script>
<script src="https://cdn.jsdelivr.net/npm/free-jqgrid@4.15.4/js/jquery.jqgrid.min.js"></script>
<script>
$(function() {
//列の設定
var col_model= [
{ name:"no" , index:"no", width:70, align:"right" },
{ name:"name", index:"name", width:100, align:"left" },
{ name:"age", index:"age", width:100, align:"right" },
{ name:"gender", index:"gender", width:100, align:"left" },
{ name:"feature", index:"feature", width:200, align:"left" }
];
//列の表示名
var header_name = ["No.","名前","年齢","性別","特徴"];
//表示するデータ
var datas = [
{ "no":1, name:"Aさん", age:20, gender:"男性", feature:"仮名ではない" },
{ "no":2, name:"Bさん", age:25, gender:"女性", feature:"ばあさんではない" },
{ "no":3, name:"Cさん", age:30, gender:"男性", feature:"特になし" },
{ "no":4, name:"Dさん", age:35, gender:"男性", feature:"デェーさんではない" },
{ "no":5, name:"Eさん", age:45, gender:"女性", feature:"胃酸ではない" },
{ "no":6, name:"Fさん", age:50, gender:"女性", feature:"特になし" },
{ "no":7, name:"Gさん", age:55, gender:"男性", feature:"じいさんではない" },
{ "no":8, name:"Hさん", age:60, gender:"女性", feature:"エロいわけではない" },
{ "no":9, name:"Iさん", age:65, gender:"女性", feature:"愛燦燦とー" },
{ "no":10, name:"Jさん", age:70, gender:"男性", feature:"川平慈英とは関係ない" },
{ "no":11, name:"Kさん", age:75, gender:"男性", feature:"計算ではない" },
{ "no":12, name:"Lさん", age:80, gender:"男性", feature:"特になし" }
];
//テーブルの作成
$( "#sample1" ).jqGrid({
data:datas //表示したいデータ
,datatype : "local" //データの種別(local,json,xml)
,caption : "表のタイトル" //表のキャプション
,colNames : header_name //列の表示名
,colModel : col_model //列ごとの設定
,rowNum : 5 //1ページに表示する行数
,rowList : [1, 5, 10, datas.length] //変更可能な1ページ当たりの行数
,height : $( window ).height() * 0.4 //高さ(px指定）
,width : $( window ).width() * 0.6 //幅(px指定）
,pager : 'pager1' //footerのページャー要素のid
,shrinkToFit : true //画面サイズに依存せず固定の大きさを表示する設定
,viewrecords: true //footerの右下に表示する。
});
$( "#sample1" ).filterToolbar({
defaultSearch : "eq" //一致条件を入れる。
//選択肢['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc']
});
});
</script>
</head>
<body>
<table id="sample1"></table>
<div id="pager1"></div>
</body>
</html>
実際にフィルターを作成しているのは
$( "#sample1" ).filterToolbar({
defaultSearch : "eq" //一致条件を入れる。
//選択肢['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc']
});
の部分ですね。
一致条件は
| 選択肢 | 説明 | 該当するSQL演算子 |
|---|---|---|
| eq | 次に等しい | = |
| ne | 次に等くない | <> |
| lt | 次より小さい | < |
| le | 次より等しいか小さい | <= |
| gt | 次より大きい | > |
| ge | 次より等しいか大きい | >= |
| bw | 次で始まる | LIKE ‘文字列%’ |
| bn | 次で始まらない | NOT LIKE ‘文字列%’ |
| ew | 次で終わる | LIKE ‘%文字列’ |
| en | 次で終わらない | NOT LIKE ‘%文字列’ |
| in | 次を含む | LIKE ‘%文字列%’ |
| ni | 次を含まない | NOT LIKE ‘%文字列%’ |
になります。
まとめ
jqGridでフィルターを実装することは非常に簡単であり、便利なのでぜひ使えるようになりましょう。
以上、jqGridの表でフィルタリング(絞り込み）を行うでした。
