【Web】【javascript】「jqGrid」で少しリッチなテーブルを作成する基礎編 | GROUP DEV BLOG

2016.04.20

プログラミング

【Web】【javascript】「jqGrid」で少しリッチなテーブルを作成する基礎編

こんにちは。RTです。

Webページを作るとき、テーブル（グリッド表示）は欠かせないですよね。
HTMLを覚えたての頃は、tableタグを駆使しながら…、CSSで段組みを組んだり…、
など色々な経験がありますが、jQueryに便利なライブラリがあるので紹介します。

「jqGrid」
http://www.trirand.com/blog/

デザインはjQueryUIが使えます。
http://jqueryui.com/

もちろんながらjQuery本体も必要です。
https://jquery.com/

まずは上記よりダウンロードし、解凍・展開します。
そしてこんな具合で読み込んでみます。

<script type="text/javascript" src="../js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/jqgrid/js/i18n/grid.locale-ja.js"></script>
<script type="text/javascript" src="../js/jqgrid/js/jquery.jqGrid.min.js"></script>

3行目のlocaleは、日本語がよいのでgrid.locale-ja.jsを読むようにします。

今回のサンプルは、DBに存在する果物リストをhtmlに表示する簡単なものです。
最初は、jqgridを使わない形で作ってみます。

DBの中身

mysql> select * from fruits;
+----+--------+-------+
| id | name   | price |
+----+--------+-------+
|  1 | banana |   100 |
|  2 | apple  |    50 |
|  3 | orange |    30 |
+----+--------+-------+
3 rows in set (0.00 sec)

mysql> select * from fruits;

+----+--------+-------+

| id | name | price |

+----+--------+-------+

| 1 | banana | 100 |

| 2 | apple | 50 |

| 3 | orange | 30 |

+----+--------+-------+

3 rows in set (0.00 sec)

get_data.php（果物リストをjson形式で返します）

<?php

//DBからデータを取得
$pdo = new PDO("mysql:host=localhost;dbname=sample;charset=utf8;","root","root");
$stmt = $pdo->query("select * from fruits order by id");

$json_data = array();
$i = 0;
while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
    $json_data[$i] = $row;
    $i++;
}
header("Content-type: application/json; charset=utf-8");
echo json_encode($json_data);
exit;

<?php

//DBからデータを取得

$pdo = new PDO("mysql:host=localhost;dbname=sample;charset=utf8;","root","root");

$stmt = $pdo->query("select * from fruits order by id");

$json_data = array();

$i = 0;

while($row = $stmt->fetch(PDO::FETCH_ASSOC)){

$json_data[$i] = $row;

$i++;

}

header("Content-type: application/json; charset=utf-8");

echo json_encode($json_data);

exit;

index.html（画面表示）

<html>
    <head>
        <title>jqgridサンプル</title>
        <script type="text/javascript" src="../js/jquery-2.2.3.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $.ajax({
                     type: "POST"
                    ,url: "get_data.php"
                }).done(function(result){
                    data = $.parseJSON(JSON.stringify(result));
                    $.each(data,function(){
                        $("#tbl1").append("<tr><td>"+this.id+"</td><td>"+this.name+"</td><td>"+this.price+"</td></tr>");
                    });
                }).fail(function(xhr, status, error){
                    alert(error);
                });
            });
        </script>
    </head>
    <body>
        <table id="tbl1" border="1">
            <tr>
                <th>ID</th>
                <th>名前</th>
                <th>価格</th>
            </tr>
        </table>
    </body>
</html>

<html>

<head>

<title>jqgridサンプル</title>

$(function(){

$.ajax({

type: "POST"

,url: "get_data.php"

}).done(function(result){

data = $.parseJSON(JSON.stringify(result));

$.each(data,function(){

$("#tbl1").append("<tr><td>"+this.id+"</td><td>"+this.name+"</td><td>"+this.price+"</td></tr>");

});

}).fail(function(xhr, status, error){

alert(error);

});

</script>

</head>

<body>

<tr>

</tr>

</table>

</body>

</html>

Ajaxで取得するシンプルな処理ですね。
表示はこんな感じですが、デザインを書いていないので味気ないですね。

jqGridを使えば、jQueryUIのデザインが適用されるうえ、様々なオプションを指定することで
$.ajax({…});などを必要としなくともAjaxでデータを取得してきてくれたり、
自動でページングを表示したり、列の幅をマウスで変更できたり、行の並び替え機能を付けたり、
色々な便利な機能が簡単に実装できます。

今回は必要最低限のオプションで作成した処理をご紹介。

<html>
    <head>
        <title>jqgridサンプル</title>
        <link rel="stylesheet" type="text/css" href="../js/jquery-ui/jquery-ui.css">
        <link rel="stylesheet" type="text/css" href="../js/jqgrid/css/ui.jqgrid.css">
        <script type="text/javascript" src="../js/jquery-2.2.3.min.js"></script>
        <script type="text/javascript" src="../js/jquery-ui/jquery-ui.min.js"></script>
        <script type="text/javascript" src="../js/jqgrid/js/i18n/grid.locale-ja.js"></script>
        <script type="text/javascript" src="../js/jqgrid/js/jquery.jqGrid.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#tbl1").jqGrid({
                     url: "get_data.php"
                    ,datatype: "json"
                    ,mtype: "POST"
                    ,colNames:["id", "名前", "価格"]
                    ,colModel:[ {name:"id"}
                               ,{name:"name"}
                               ,{name:"price"}
                     ]
                    ,width: "auto"
                    ,height: "auto"
                    ,'loadError' : function (xhr, status, error){
                        alert(error);
                    }
                });
            });
        </script>
    </head>
    <body>
        <table id="tbl1"></table>
    </body>
</html>

<html>

<head>

<title>jqgridサンプル</title>

$(function(){

$("#tbl1").jqGrid({

url: "get_data.php"

,datatype: "json"

,mtype: "POST"

,colNames:["id", "名前", "価格"]

,colModel:[ {name:"id"}

,{name:"name"}

,{name:"price"}

]

,width: "auto"

,height: "auto"

,'loadError' : function (xhr, status, error){

alert(error);

}

});

</script>

</head>

<body>

</body>

</html>

表示するとこんな感じ。

以下の箇所でAjaxを処理してくれます。

url: "get_data.php"
,datatype: "json"
,mtype: "POST"
（省略）
,'loadError' : function (xhr, status, error){
    alert(error);
}

url: "get_data.php"

,datatype: "json"

,mtype: "POST"

（省略）

,'loadError' : function (xhr, status, error){

alert(error);

}

オプションのcolNamesで見出し、colModelで各列の詳細設定を記述することができます。
その他詳しいオプションは、公式のWikiがありますので参照してみてください。
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

たくさんのオプションがありますのでほかにも便利な機能をご紹介したいですが、また機会があったときに。

それでは。

【テクノモバイルではエンジニア/デザイナーを積極採用中です！】

下記項目に1つでも当てはまる方は是非、詳細ページへ！

自分でアプリを作ってみたい
ITで世の中にワクワクを生み出したい
使いやすさ、デザインにこだわったWebサイトを開発したい

採用情報の詳細はこちら

Qangaroo（カンガルー）

徹底した見やすさと優れた操作性で、テストの「見える化」を実現。
テストの進捗が見える。開発がスマートに進む。
クラウド型テスト管理ツール『Qangaroo（カンガルー）』

https://qangaroo.jp/