メニューを閉じる

テクノモバイルグループ

メニューを開く

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/

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

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

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

DBの中身

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

index.html(画面表示)

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

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

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

表示するとこんな感じ。
0417_2

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

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

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

それでは。


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

下記項目に1つでも当てはまる方は是非、詳細ページへ!
  • 自分でアプリを作ってみたい
  • ITで世の中にワクワクを生み出したい
  • 使いやすさ、デザインにこだわったWebサイトを開発したい

採用情報の詳細はこちら


Qangaroo(カンガルー)

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

最近の記事

SNS共有

X CLOSE
X CLOSE
X CLOSE