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 によってこのグリッドは1行に付き4列のデータを受け取り、それぞれ 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フィルター (検索) 文字
rp1ページの表示レコード数

これらのパラメータがクライアントから POST されてきますので、サーバー側ではそれに合わせて、 適切なクエリーを行い JSON データを作れば OK です。