2024.10.01
【勉強】ミドルウェア・アプリケーションのEOL・EOSLについて学んでみた
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)
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;
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>
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>
以下の箇所でAjaxを処理してくれます。
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つでも当てはまる方は是非、詳細ページへ!Qangaroo(カンガルー)
【テクノデジタルのインフラサービス】
当社では、多数のサービスの開発実績を活かし、
アプリケーションのパフォーマンスを最大限に引き出すインフラ設計・構築を行います。
AWSなどへのクラウド移行、既存インフラの監視・運用保守も承りますので、ぜひご相談ください。
詳細は下記ページをご覧ください。
最近の記事
タグ検索