JQGridはデータテーブルとそれを操作する機能を盛り込んだプラグインです。
なかなかスタイリッシュなテーブルが作れます。
ただ、情報が少なくて導入から実装にはかなり手こずりました＞＜
一応、わかったところまでメモを残しておきたいと思います。
導入方法
UIと同じく必要な機能を選択してダウンロードします。
そして任意のフォルダに以下の構成を参考に配置してください。
C:\jqGrid\
│
├─css
│ │ jquery-ui.custom.css ←これはJQuery-UIのものです。
│ │ ui.jqgrid.css
│ │
│ └─images
｜ (中身はJQuery-UIのものです)
│
└─js
│ jquery.jqGrid.min.js
│
└─i18n
grid.locale-jp.js
実装例
ここは後ほど書きます。
主にプロパティの備忘録です。
XMLデータフォーマット
こんな形式のデータを読み込んでくれます。
もちろんDBへアクセスして表示も出来ますが、とりあえずのプロトタイプとして使っています。
<rows>
<row id='id1'>
<cell>data1_1</cell>
<cell>data1_2</cell>
<cell>data1_3</cell>
<cell>data1_4</cell>
<cell>data1_5</cell>
</row>
<row id='id2'>
<cell>data2_1</cell>
<cell>data2_2</cell>
<cell>data2_3</cell>
<cell>data2_4</cell>
<cell>data2_5</cell>
</row>
</rows>
使用上の注意
薬じゃないですけどｗ
HTMLファイルには以下の記述を忘れないで下さい。
順番もお間違えなく。
この表記の順番を間違えただけでエラーに捕まってしまったのは内緒です＞＜
<link rel="stylesheet" type="text/css" media="screen" href="/js/jgrid/css/ui.jqgrid.css" />
<script type="text/javascript" src="/js/jgrid/js/i18n/grid.locale-(任意).js"></script>
<script type="text/javascript" src="/js/jgrid/js/jquery.jqGrid.min.js"></script>
それからJqGridはJQuery-UIのデザインを参照していますので、以下の記述も忘れずに。
<link rel="stylesheet" type="text/css" media="screen" href="(任意のパス)/jquery-ui.custom.css" />
最終更新：2011年01月09日 17:32
