jqGridの表でフィルタリング(絞り込み）を行う

jqGridでは表のヘッダー部分に入力エリアを設けて絞り込みを行うことが簡単にできます。

プログラミングとしては作成したjqGridの表に「filterToolbar」メソッドでフィルターを追加するだけです。

jqGridの表でフィルタリング(絞り込み）を行う
まとめ

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の表でフィルタリング(絞り込み）を行うでした。