【jqGrid】サイトにjqGridを導入する方法

2020/06/032021/01/09JavaScriptjQuery,jqGrid,Javascript

jQueryのプラグイン「jqGrid」はHTML標準の「TABLEタグ」だけでは実現するには難しいデータのソートや絞り込みなどの機能を実現してくれるものです。

今回はその「jqGrid」をサイトで利用できるようにする方法です。

1. サイトにjqGridを導入する方法

サイトにjqGridを導入する方法

jqGridは

jQuery Grid Plugin – jqGrid

jQuery Grid Plugin – jqGrid jQuery Grid Plugin – jqGrid Grid plugin Home Documentati ...

http://www.trirand.com/blog/

でダウンロードできるのですが、利用は無料ではないので、今回は無料バージョンをCDNからリンクして使うことにします。

具体的には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>
</head>

jqGridはjQueryのプラグインなのでjQuery本体もCDNからのリンクを追加しておきます。

実際に表を表示するには

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <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/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" }
                               ];

                //列の表示名
                var header_name = ["No.","名前","年齢","性別"];
                //表示するデータ
                var datas = [
                    { "no":1,  name:"Aさん", age:20, gender:"男性" },
                    { "no":2,  name:"Bさん", age:25, gender:"女性" },
                    { "no":3,  name:"Cさん", age:30, gender:"男性" },
                    { "no":4,  name:"Dさん", age:35, gender:"男性" },
                    { "no":5,  name:"Eさん", age:45, gender:"女性" }
                ];

                //テーブルの作成
                $( "#list_table" ).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 : 'list_pager'                //footerのページャー要素のid
                                       ,shrinkToFit : true                  //画面サイズに依存せず固定の大きさを表示する設定
                                       ,viewrecords: true                   //footerの右下に表示する。
                 });

                $( "#list_table" ).filterToolbar({
                    defaultSearch : "eq"     //一致条件
                });

            });
        </script>
    </head>
    <body>
        <table id="list_table"></table>
        <div id="list_pager"></div>
    </body>
</html>

のような感じになります。