jqGrid

カンタンにリッチなテーブルを実装する方法【jqGrid】

jqGrid_introduction

jqGridって何?

jqGridはjQueryを使ってカンタンにリッチなテーブルを実装することができるライブラリです。

jQGrid表示サンプル

この内容だと30行程度の記述で済みます。

裏でjQueryを使っているだけで、jQueryの構文をしらなくてもOK。

 

設定次第でマルチソートや行選択、値編集なども行うことができるスグレモノ。

マルチソートは自分で実装しようとするとかなりメンドくさいので助かります。

 

事前準備

jqGridとjQueryを用意します。

  • jqGrid:ページの下の方にある「Download」ボタン
  • jQuery:Downloadのところにあるリンク

 

商用利用について

jqGridは4.7.1までは無償で商用利用可能でしたが、それ以降は有償となっています。

 

詳しくはコチラを確認してください。

If you want to use this product for a personal, school or non-profit project, then you can use it for free under the Creative Commons Attribution-Non-Commercial 3.0 License.

(この製品を個人、学校、または非営利のプロジェクトに使用する場合は、クリエイティブコモンズの表示-非営利3.0ライセンスの下で無料で使用できます。)

 

実装方法

コトバで説明するよりコードを見た方が早いですね。

「$(document).ready」の中でいろいろ定義しています。

 

colNameが列名、colModelが列の詳細な定義、dtが表示するデータですね。

このサンプルでは変数で受けてから「$("#grid01").jqGrid」で設定していますが、変数で受けずに直接設定することもできます。

 

bodyはグリッドとページャーが刺さるdivタグだけですね。

これだけのコードでこのテーブルができます。

jQGrid表示サンプル

 

headやbodyがなんなのかよく分からないという方はこちらの記事を読んでみてください。

 

参考
eyecatch
HTMLとCSSの基本を現役SEが解説【PHPも少し】

続きを見る

 

まとめ

世の中には便利なものがありますね~。

 

今後は動的にjqGridを作る方法や、datepickerの設定方法などを紹介する予定なので、よかったらそちらも見てみてください。

 

それでは!

 

-jqGrid
-

© 2020 eureka