AJAX によるデータ取得
Flexigrid は先の例でみたように、HTML にハードコードされたスタティックなデータに適用することもできます。
しかしながら、AJAX で後からデータをバインドするところに特に強みがあるといえます。
ここでは Flexigrid とバインド可能なデータ構造について、実例をあげて説明します。
JavaScript でのグリッド定義
JavaScript で Flexigrid の定義を行います。
$( function() {
$("#grid1").flexigrid({
url: 'data1.php',
dataType: 'json',
colModel : [
{display:'ID',name:'iid',width:40,sortable:true,align:'left'},
{display:'タイトル',name:'title',width:250,sortable:true,align:'left'},
{display:'カテゴリ',name:'category',width:150,sortable:true,align:'left'},
{display:'更新日',name:'pubdate',width:150,sortable:true,align:'left'}
],
searchitems : [
{display:'カテゴリ',name:'category'},
{display:'タイトル',name:'title',isdefault:true}
],
sortname: "iid",
sortorder: "DESC",
usepager: true,
title: "更新情報",
useRp: true,
rp: 15,
showTableToggleBtn: true,
resizable: true,
width: 500,
height: 400,
singleSelect: true
});
});
colModel によってこのグリッドは１行に付き４列のデータを受け取り、それぞれ ID、タイトル、カテゴリ、更新日であることがわかります。
そしてそれぞれの行の幅 (width) や表示名などをきめます。ここでは使っていませんが、非表示にしておきたいカラムは hide:true とします。
その他の属性の意味は、その属性名からほぼ直感的に分かるのではないかと思います。
JSON のフォーマット
上のグリッドに対して JSON では次のような形でデータを送り返せば OK です。
{
'page': '1',
'total': '100',
'rows':[
{
'id':'1',
'cell':[ 'Column1-1', 'Column1-2', 'Column1-3', 'Column1-4']
},
{
'id':'2',
'cell':[ 'Column2-1', 'Column2-2', 'Column2-3', 'Column2-4']
},
... 繰返し
]
}
この例では page、 total に示した箇所でそれぞれ、ページネーションの 1 ページ目のレコードであること、そして全部で100件のレコードがあることをしめしています。 そして実際に返すデータは rows に配列にします。
rows の一行一行は、 id と cell という属性を持つオブジェクトです。id はその名の通りデータの識別子をセット。 cell には行毎のデータをセットします。
cell の配列の最初の要素から順番にグリッド側で colModel で定義したデータとして認識されます。
クエリーパラメータ
表示ページの変更、ソートの変更などは、サーバーに対してそれぞれ次のパラメータとして POST されます。
| page | 表示ページ |
| sortname | ソートカラム名 |
| sortorder | ソート順 (昇順降順) |
| qtype | フィルター対象にするカラム名 |
| query | フィルター (検索) 文字 |
| rp | １ページの表示レコード数 |
これらのパラメータがクライアントから POST されてきますので、サーバー側ではそれに合わせて、 適切なクエリーを行い JSON データを作れば OK です。