FlexigridでAjaxを使う

概要

Flexigrid で Ajax を使うことにより、ページ単位での表示、ソート、検索等のさらに複雑で便利な機能に対応することが可能です。

使用方法

JavaScript 側では設定項目が増えるだけで、基本的には使用方法は変わりません。
その代わりに、Ajaxで呼び出されるプログラム側でデータを出力する部分を実装する必要があります。

なお、それぞれの機能の実装方法は、それぞれの項目を参照してください。

Flexigrid：ページ表示

JavaScript側

Flexigrid の設定項目中で、url に Ajax で取得する URL を、dataType でその取得するデータの型を指定します。
データ型は xml と json が指定可能です。

Flexigrid の設定項目中で、colModel で列について、以下のように設定を行うことが出来ます。

なお、テーブルの要素の実体は Ajax で取得しますので空でＯＫです。

 <table id="wiki_list"></table>
 
 <script type="text/javascript">
 <!--
 
 $(document).ready(function()
 {
    $('#wiki_list').flexigrid(
      {
        ...
        url:      '/test/ajax.cgi',
        dataType: 'json',
        colModel : [ {display: 'ID', name: 'id', width: 40, sortable : true, align: 'right' },
                     {display: 'タイトル', name: 'title', width: 300, sortable : true, align: 'left' },
                     {display: 'カテゴリ', name: 'category', width: 200, align: 'left' },
        ],
        ...
      }
    );
  }
  );
  -->
  </script>

Ajaxで呼び出されるプログラム側

dataType で指定された形式で、表示するテーブルデータを出力します。
以下、Perl プログラムの例です。

 use Encode;
 use JSON;
 
 ...
 
 my @rows = ();
 for my $w (@data) {
     push @rows, { id    => $w->id,
                   cell  => [ $w->id,
                              Encode::decode_utf8($w->title),
                              Encode::decode_utf8($w->category),
                            ],
                 };
    }
    my $result = { page => $self->param('page'),
                   total => $total,
                   rows  => [ @rows ],
                 };
    print $self->header(-type => 'text/x-json', -charset => 'utf-8'),
          to_json($result, { utf8 => 1 });

Perl で JSON 形式で出力することについては、JSON.pmを参照。