jqGridで表を表示する方法

2020.05.27
記事内に広告が含まれています。

jQueryのプラグイン「jqGrid」を使えばHTMLのtableタグではできない、データソートや絞り込み機能を簡単に実現することができます。

そのjqGridで標準的な表を表示してみます。

jqGridで標準的な表を表示する方法

jqGridを利用するにはjQueryが必要なので、そのスクリプトとCSSを読みこみます。

<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>

こんな感じですかね。

ダウンロードするのが面倒なのでCDNを使ってます。

次にjqGridが作成した表を表示させるエリアを作ります。

<body>
    <table id="sample1"></table>
    <div id="pager1"></div>
</body>

この「sample1」テーブルと「apger1」DIVにjqGridの作成結果を流し込みます。

ここまでは前準備ですね。

ここからがjqGridで表を表示させる部分です。

まずは表の列タイトルから。

表の列タイトルは個数分の文字列配列を作成します。

var header_name = [ "No.", "名前", "年齢", "性別", "特徴" ] ;

こんな感じですね。

次に各カラムの定義を作成します。

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 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:"特になし" }
         ];

これで準備完了です。

いよいよ、jqGridを呼び出して表を作成させます。

$("#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の右下に表示する。
  });

こんな感じです。

これをHTML完成タイミングで呼び出せばよいでしょう。

全てのソースは以下になります。

<!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の右下に表示する。
                });


                });
        </script>
    </head>
    <body>
        <table id="sample1"></table>
        <div id="pager1"></div>
    </body>
</html>

jqGridにいろいろパラメータを渡していますが、それぞれはそれほど難しいものではないので理解できると思います。

実際にうまく行けば以下のような表が表示されます。
jqGridで作成した標準的な表

まとめ

jQueryのプラグイン「jqGrid」を使えばHTMLのtableタグではできない、データソートや絞り込み機能を簡単に実現することができます。

ソートや絞り込み、カラムの修正などをしたい表を作成する時にはぜひ使ってみてください。

以上、jqGridで表を表示する方法でした。

スポンサーリンク
タイトルとURLをコピーしました