jqGrid は、jQuery を使用したテーブルをグラフィカルに表示する多機能なプラグインです。
配列や JSON 形式のデータを設定するだけで、良い感じにテーブルを表示してくれます。
ライブラリの導入方法
jQuery UI の CSS を使用しますので、一緒に導入する必要があります。
多分、readme を見た限りでは、css と画像しか使っていないと思うんだけど、詳しく見てないので実際はちょい不明。
心配な場合は、一緒に導入しましょう。
あと、当然、jQuery が入っていないと動かないので悪しからず。
とりあえず、ここでは全部使用してしまいましょう。
上記をすべてダウンロードして、自分は以下の感じで配置してます。
忘れちゃいけないのが、jQuery-UI の画像ファイルを jqGrid では使用しているので、しっかり配置しておきましょう。
あと、jqGrid と同列のディレクトリに、メッセージボックスで表示するメッセージとかを定義する locale のファイルを置く必要があります。
同梱されているファイルがありますので、それを使用しませう。
プロジェクト
│
│index.html
│
└─plugin
├─jqGrid
│ grid.locale-ja.js
│ jquery.jqGrid.min.js
│ ui.jqgrid.css
│
├─jquery
│ jquery-1.9.1.js
│
└─jquery-ui
│ jquery-ui-1.10.1.custom.min.css
│ jquery-ui-1.10.1.custom.min.js
│
└─images
animated-overlay.gif
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_55_fbec88_40x100.png
ui-bg_glass_75_d0e5f5_1x400.png
ui-bg_glass_85_dfeffc_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_gloss-wave_55_5c9ccc_500x100.png
ui-bg_inset-hard_100_f5f8f9_1x100.png
ui-bg_inset-hard_100_fcfdfd_1x100.png
ui-icons_217bc0_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_469bdd_256x240.png
ui-icons_6da8d5_256x240.png
ui-icons_cd0a0a_256x240.png
ui-icons_d8e7f3_256x240.png
ui-icons_f9bd01_256x240.png
上記の配置にしたら、html ファイルに読み込む JavaScript を指定します。
例えば、index.html を以下の感じにします。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX.HTML</title>
<script type="text/javascript" src="./plugin/jquery/jquery-1.9.1.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="./plugin/jquery-ui/jquery-ui-1.10.1.custom.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="./plugin/jqGrid/ui.jqgrid.css" />
<script src="./plugin/jqGrid/grid.locale-ja.js" type="text/javascript"></script>
<script src="./plugin/jqGrid/jquery.jqGrid.min.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
データの設定
POST して返ってきたデータを設定します。
単純な jqGrid のサンプルです。
HTML には、tblGrid というIDのテーブルタグと、tblPager というIDのDIVタグを用意している想定です。
$("#tblGrid").GridUnload();
$("#tblGrid").jqGrid
(
{
url : "./json.php",
datatype : "json",
mtype : "POST",
height : 600,
width : 700,
rowNum : 30,
rownumbers : true,
viewPagerButtons : true,
pager : "#tblPager",
recordtext : "View {0} - {1} of {2}",
viewrecords : true,
multiselect : false,
caption : text,
postData : { 'original' : "data1" },
cellEdit : true,
cellSubmit : 'clientArray',
colNames : [ '列1', '列2', '列3'],
colModel : [ { name : '列1', index : '列1', width : 50, sorttype : 'str', align : 'left' },
{ name : '列2', index : '列2', width : 50, sorttype : 'str', align : 'left' },
{ name : '列3', index : '列3', width : 50, sorttype : 'int', align : 'left' } ]
}
).navGrid
(
"#tblPager",
{
view : false,
cloneToTop : false,
closeOnEscape : false,
add : false,
edit : false,
search : true,
refresh : false,
del : false
}
);
各パラメータは以下の感じ。
ちょっと違うかもしれん。
jqGrid Options
本家ドキュメント
| url |
送信先URL |
| datatype |
jqGrid で使用するデータタイプ |
| mtype |
送信方法 |
| height |
表の高さ |
| width |
表の横幅 |
| rowNum |
行数 |
| rownumbers |
行番号の表示有無 |
| viewPagerButtons |
ページャボタン表示の有無 |
| pager |
ページャを表示するためのID指定 |
| recordtext |
何行目を表示しているかを表すテキスト |
| viewrecord |
行数表示の指定 |
| colNames |
どのような列を表示するか |
| multiselect |
行選択用のラジオボタン表示 |
| caption |
表名 |
| postData |
独自に送信するデータ |
| colModel |
列の形式 |
| navGrid |
行追加や削除などのオプションボタンの表示 |
navGrid
本家ドキュメント
| view |
選択した行を表示をON |
| cloneToTop |
最初のページに戻るをON(良くわからん) |
| closeOnEscape |
Esc で閉じる(良くわからん) |
| add |
行追加ボタンを表示 |
| edit |
行編集ボタンを表示 |
| search |
検索ボタンを表示 |
| refresh |
リフレッシュボタンを表示 |
| del |
削除ボタンを表示 |
最終更新：2013年03月07日 21:27
