ちょっと生きづらさを抱えた人へ、気持ちを楽にするためのお手紙です。

【jqGrid】ダウンロードして取りあえず表示してみる

jqGridを使う必要があるのだけれど、
ぐぐってみてもみなさまの説明がカタコトで、
全然理解できず
わたしもこのブログで技術系の話題を書くとき、自分の覚書であることメインなのと、
コードを見ればわかるでしょ、ということで詳しい説明はしないことが多いので、
人のことは全然言えないわけですが(笑)

というわけで、自分が理解するためにも、できるだけ詳しく説明したいと思います。
とは言え、わたしもわかっていないから、結構あやふやです。

jqGridとは

おしゃれな表を作れるライブラリだそうです。

jQueryUIのインストール

jQueryUIhttp://jqueryui.com/download/
jQueryベースのライブラリで、jqGridを使うのに必要。
ダウンロードページの一番下のテーマを選択するところは、ThemeRollerでデザインのデモを見られるので、
気に入ったのを選べば良いんだと思う。

jqgrid_01
Galleryタブのなかのサムネイルを選択すると、右側に適用されます。

中にはファイルがいろいろ入っているのだけど、今回使うのは
jquery-ui.min.css

他のファイルは何?というのは、こちらで詳しく説明がありました。最高。
[blogcard url=”http://kojikoji75.hatenablog.com/entry/2013/09/13/172117″]

jqGridのインストール

jqGridhttp://www.trirand.com/blog/?page_id=6
ダウンロードページ下部の[DownLoad]ボタンをクリックすればダウンロードできます。

これもファイルがいろいろあるけど、今回使うのは
js/jquery-1.11.0.min.js(数字の部分はバージョンによって違います)
js/jquery.jqGrid.min.js
js/i18n/grid.locale-ja.js
jqGrid/css/ui.jqgrid.css

ライブラリの解凍と配置

中身はjsやcssなので、jspやhtmlからパスを参照できる
好きなところに置けば良いです。
jqGridのフォルダはリネームして、わたしはこんな配置にしました。
jqgrid_02

コーディング

jqgrid_03
こんな表を表示するのが、今日の目標です。

上記のダウンロードしたファイルはJavascriptとcssなので、
jsp/htmlには通常のHTMLで記載すればOK。
パスはわたしの好みで${pageContext.request.contextPath}になっています。
当然、相対パスでも書けるので、現場のルールに沿えば良いです。

他のサイトでは、htmlに直接functionを書いている場合が多かったのですが、
わたしはフロントエンドエンジニアではないので、
データベースから取得した値に応じて編集する、ログインユーザによって出しわける
とかやる前提で、別のfunctionを噛ませて表を生成するようにしました。

表の表示データをJSon形式にするつもりなので、ロード時は空っぽのデータを
わたしています。
これは、検索結果表示前もヘッダを表示するという仕様の場合もあるため。

そして今日の要、jqGridでの表の生成部。
変数で設定しているところは、設定値として使います。
だから分けなくても、書ける。
「jqGrid-tbl」はjspでTableタグに設定したidです。
設定値はコメントを書いたけれど、わたしもまだ把握しきれてません。

参考にさせていただいたサイト

http://qiita.com/k499778/items/65db2380d989b1d70985
http://acro-engineer.hatenablog.com/entry/20110715/1310683073
http://www.northwind.mydns.jp/samples/jqgrid_sample5.php

今日のひとこと

ブログ上見やすいように、コードの位置揃えをやってみたんだけれど、
わたしは正直言ってそういうの無駄だと思うタイプで、やっぱり
面倒くさいぃぃと思いました。次から揃えません。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください