jQuery を使って動的で高品質なウェブサイトを構築する方法を解説しています。なるべく動くサンプルコードを記載しています。
jQuery 入門jQuery 入門
jQuery の使い方
jQuery の基礎
jQuery モバイル
jQuery UI
サンプルのテーマ変更

jQuery の拡張
関連サイト
サイト情報
ホーム > フレックシグリッド (Flexigrid) > AJAX によるデータ取得

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 です。

ホーム > フレックシグリッド (Flexigrid) > AJAX によるデータ取得
小山圭介 著者
小山 圭介
4/15/1973生
米国在住のソフトウェアエンジニア。ITコンサルタント.. »プロフィール

© 2011-2017 Keisuke Oyama jQuery 入門