Webアプリを開発していると、テーブルを使用する場面が多いと思います。データの並べ替えやテーブル内のデータの編集、スクロールなど結構手間がかかってしまいます。そのような手間をすでにライブラリとして提供してくれる jqGrid (jQuery Grid プラグイン) というものがあります。
見た目もなかなか良くて、機能も充実しているのでお勧めです。
導入
まずは、インストールです。HTTP サーバーのアクセスできる場所へ jQuery, jQuer-UI と jqGrid を展開します。 CentOS の Apache のデフォルト設定を例に説明します。
ドキュメント ルート(/var/www/html/) の下に “lib/jquery” フォルダを作成します。
/var/www/html/lib/jquery/
ここに、jQuery ライブラリ、jQuery UI ライブラリ、jqGrid をダウンロードしてきます。
(※ jQuery ライブラリは jQuery UI ライブラリにバンドルされているものを使用します。)
最初に、jQuery UI ライブラリを https://jqueryui.com/download からダウンロードしてきます。
- 「Download jQuery UI 1.9.0」をクリック
- 「ダウンロードビルダー」ページで全項目をチェックしておきます。それからページ最後尾にある「Themes」のセクションからテーマをコンボボックスから選びます。ここでは “Redmond” を選びことにしました。最後に「Download」ボタンをクリックします。
そして次に、jqGrid プラグインを https://www.trirand.com/blog/?page_id=6 からダウンロードしてきます。
この２つの zip ファイルを /var/www/html/lib/jquery/ へ展開します。
- css/
- redmond/
jquery-ui-1.9.0.custom.css
jquery-ui-1.9.0.min.css
elipsis-xbl.xml
ui.jqgrid.css
+ development-bundle/
- js/
+ i18n/
jquery-1.8.2.js
jquery-ui-1.9.0.custom.js
jquery-ui-1.9.0.custom.min.js
jquery.jqGrid.min.js
jquery.jqGrid.src.js
jquery-1.7.2.min.js
Changes.txt
install.txt
+ plugins/
+ src/
index.html
これで、必要なものがそろいました。jqGrid に必要なライブラリをページの <HEAD> … </HEAD> ないへ記述します。
<head> ... 省略 ... <link type="text/css" media="screen" href="lib/jquery/css/redmond/jquery-ui-1.9.0.custom.min.css" rel="stylesheet" /> <link type="text/css" media="screen" href="lib/jquery/css/ui.jqgrid.css" rel="stylesheet" /> <script type="text/javascript" src="lib/jquery/js/jquery-1.8.2.js"></script> <script type="text/javascript" src="lib/jquery/js/jquery-ui-1.9.0.custom.min.js"></script> <script type="text/javascript" src="lib/jquery/js/jquery.jqGrid.min.js" ></script> <script type="text/javascript" src="lib/jquery/js/i18n/grid.locale-ja.js" ></script> ... 省略 ... </head>
実装
簡単なグリッドを作成してみます。
ドキュメントルートの下に “samples” というフォルダを作成しました。 (/var/www/html/samples )
ここに、下記ソースを jqgrid_sample1.html という名前で保存します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<link type="text/css" media="screen" href="lib/jquery/css/redmond/jquery-ui-1.9.0.custom.min.css" rel="stylesheet" />
<link type="text/css" media="screen" href="lib/jquery/css/ui.jqgrid.css" rel="stylesheet" />
<script type="text/javascript" src="lib/jquery/js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="lib/jquery/js/jquery-ui-1.9.0.custom.min.js"></script>
<script type="text/javascript" src="lib/jquery/js/jquery.jqGrid.min.js" ></script>
<script type="text/javascript" src="lib/jquery/js/i18n/grid.locale-ja.js" ></script>
<script type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function()
{
var mydata = [
{comp_code:"CD1", comp_name:"株式会社シー", comp_kana:"カブシキカイシャシー"},
{comp_code:"CD2", comp_name:"ビー株式会社", comp_kana:"ビーカブシキカイシャ"},
{comp_code:"CD3", comp_name:"有限会社エー", comp_kana:"ユウゲンガイシャエー"},
];
jQuery("#list").jqGrid({
data: mydata, // データ配列
datatype: "local", // ローカルのデータ
colNames:['コード', '会社名', 'カナ'], // グリッドの列名
colModel:[ // グリッド列定義とデータ配列の関連付け
{name:'comp_code'},
{name:'comp_name'},
{name:'comp_kana'},
],
multiselect: false, // 行の複数選択はしない（単一選択）
caption: '会社一覧' // グリッドのタイトル
});
});
</script>
</head>
<body>
<table id="list">
</table>
</body>
</html>
mydata という配列にグリッド内へ表示するデータを定義します。HTMLのテーブルを id=”list” としてを作成しました。テーブル(id = list) と jqGrid の関連付け、列定義や表示するデータを jQuery(document).ready メソッドに function として渡します。
表の折りたたみ、列データの並べ替え、列幅の調整、スクロールなどが一切のコードを記述することなく実装されています。
動作確認
こちらで実際に確認できます。
「jqGrid を試してみる（導入編）」への11件の返信
はじめまして、いつも記事やブログを参考にして勉強させていただいてます。
突然申し訳ないのですが、jqgridについてご教授願いたい箇所がありましてコメントさせていただきました。
本題なのですが、jqgridを用いてのデータベースの読み込み、データベースへの書き込みはできたのですが、
datatype: ‘local’,
のときにソートできていたものが
datatype: ‘xml’,
にすると、ソートができなくなってしまいます＞＜
なにか解決策をご存じではないでしょうか？？
もしよろしければ私宛にメールをいただけると幸いです。
何卒ご教授宜しくお願いいたしますｍ（＿）ｍ
コメントありがとうございます。
jqGrid XML データ サンプルとjqGrid XML/JSON 形式データ出力サンプルを書き直しました。
jqGrid の列がクリックされるとデータ取得元のＵＲＬへ、クリックされた列と並べ替え順などのパラメータが渡されます。それを使ってデータベースから検索し、並べ替えた結果を送信するとグリッドに反映されます。
以上です。
お世話になります。早乙女遙佳と申します。
とても役立つサンプルを提供してくださり、感謝です。
jqGridの学習をしていますが、
サーバーからjson形式でデータを読み込み表示、
フォーム内で追加・編集・削除して
サーバーへ送信、
送信後の更新されたレコードを再読み込みしたいと考えております。
https://www.northwind.mydns.jp/samples/jqgrid_sample13.php
https://www.northwind.mydns.jp/samples/jqgrid_sample22.php
を参考にプログラムを作っていますが、
$(‘#list’).navGrid(‘#pager’, {refresh: true, edit: true, add: true, del: true, search:true, view: true});
と書くと、ナビゲーションバーの左側に、追加、編集、削除などのボタンが作られます。
jqgrid_sample13/22.php では、専用のボタンをクリックすると、フォームが現れるようにコーディングされていましたが、ナビゲーションバー内のボタンを用いても可能ではと思いました。
どのように書けばよいのでしょうか？
大変お手数ですが、ご教授いただけないでしょうか。
どうぞ、よろしくお願いいたします。
コメントありがとうございます。返信おそくなってすみません。
ナビゲーションバーのボタンを利用するサンプルを新たに作ってみました。
もっと良い方法があるのかもしれませんが、試行錯誤の結果上記のサンプルのようにしてみました。
参考になればよいですが。
お世話になります。 早乙女遙佳です。
ご回答、ありがとうございます。
標準で用意されるフォームの送信ボタンから
どうやってDBにアクセスすればよいのだろうと思っておりました。
無理に標準フォームを使わずに、という発想の切り替えが大事なのですね。
早速実装してサイト構築して行きたいと思います。
感謝です。
お世話になっております。高橋です。
jQuery初心者です。
jQuery ライブラリ、jQuery UI ライブラリ、jqGrid をダウンロードしてと詳細に説明がありますが、最新モジュールで実施しようとすると文字のみが表示されて、グリッドが表示されません。
モジュールの入手方法が難解な為、大変お手数ですが、ご教授いただけないでしょうか。
よろしくお願いいたします。
最新版で以下にまとめました。どうでしょうか？
jqueryとjquery-uiの簡単導入: http://www.northwind.mydns.jp/samples/blog/?p=1223
jqGrid の簡単導入: http://www.northwind.mydns.jp/samples/blog/?p=1229
お世話になっております。高橋です。
非常に分かりやすい説明で、助かります。
私の環境で、実現出来ました。ありがとうございます。
度々で申し訳ございませんが。Mydataの中の1項目に
リンク情報を埋め込んで、表示させる事が出来るでしょうか？
解決策をご存じでしたらご教授いただけないでしょうか。
よろしくお願いいたします。
セルのリンクそのままでは開かないんですよね。
カスタムフォーマットでアンカータグを生成してセルに表示させて、そのアンカータグの onclick イベントで処理するとできます。
こちらを参考にしてください。
jqGrid セル中リンクを表示するサンプル
お世話になっております。高橋です。
度々の対応ありがとうございます。
やはりurlを表示させないと無理ですよね！
了解しました。
[…] jQuery / jQuery UI の使用方法について jqGrid を試してみる（導入編） でふれましたが、最新の jQuery は少しファイル構成が変わっているので、jQuery 1.11.2 / jQuery UI 1.11.2 で再度わかりやすくま […]