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

jQuery の拡張
関連サイト
サイト情報

行のカスタマイズ

ここでは Flexigrid の行をカスタマイズする方法を紹介します。

特に行をクリックした時のイベントハンドラの設定、グリッドのセルのデータ表示取得方法についてです。

行のカスタマイズを行った Flexigrid

ここでは前回作成したグリッドの行をクリックして、別のページにジャンプする仕組みを作ります。

タイトルがクリック可能になっています。

これをするには次のようにします。

$(function() {

  function getText(rowid, idx){
    var row = $('#row' + rowid);
    if(!row){
      return '';
    }
    var t, c = row.children()[idx];
    if( c && c.childNodes.length && ( t = $(c.childNodes[0]) ) ){
      return t.text();
    }
    return '';
  }

  function procTitle(celDiv,id){
    $(celDiv).css({
      'text-decoration': 'underline',
      'color': 'blue',
      'cursor': 'pointer'
    });

    var url = getText(id, 4);

    $(celDiv).click(function(){
      window.location.href = url;
    });
  } 

  $("#grid1").flexigrid({
    url: 'data1.php',
    dataType: 'json',
    colModel : [
      {display:'ID',name:'iid',width:30,sortable:true,align:'left'},
      {
        display:'タイトル',
        name:'title',
        width:300,
        sortable:true,
        align:'left',
        process:procTitle
      },
      {display:'カテゴリ',name:'category',width:50,sortable:true,align:'left'},
      {display:'更新日',name:'pubdate',width:50,sortable:true,align:'left'},
      {display:'URL',name:'url',hide:true}
    ],
    searchitems : [
      {display:'カテゴリ',name:'category',isdefault:true},
      {display:'タイトル',name:'title'}
    ],
    sortname: "iid",
    sortorder: "DESC",
    usepager: true,
    title: "更新情報",
    useRp: true,
    rp: 15,
    showTableToggleBtn: true,
    resizable: true,
    width: 520,
    height: 435,
    singleSelect: true
  });

});

ではポイントを順にみていきましょう。

Process API メソッドを利用した行追加時のイベント設定

colModel でカラムを定義する際に、process 属性にファンクションオブジェクトを渡すことができます。 process に設定したファンクションはカラムのデータが設定される時に、行毎に呼び出されます。 ちなみに、process に渡したファンクションはプロセス API メソッドと呼ばれます。

上の例では title カラムを設定する時に、process で指定した procTitle ファンクションが呼び出されることになります。

  function procTitle(celDiv,id){
    $(celDiv).click(function(){
      ...
    });
  } 

プロセス API メソッドには、データを設定するセルと行ID が渡されます。第一パラメータに渡されるセルを利用すると、 上のコード例のようにセルのクリックイベントが設定できます。

セルの値取得

Flexigrid では行毎に row1, row2, ... のように row<ID> という ID が設定されます。

単純な ID 割り振り規則なので、複数のテーブルが存在してそれぞれが数字の ID を返すと、ひとつのページ内で ID が重複する可能性があるので、 テーブル毎にプリフィックスを付けておくなどして、行の ID がかぶらないように注意してください。

プロセス API メソッド内では、その行 id が第二パラメータで渡されるので、$('#row' + id) で行が取得できます。

グリッド行のそれぞれのカラムでは、 DivElement または TextNode が設定されます。

したがって、row の childNodes をチェックして、DivElement 要素が子要素であれば innerText を取得、TextNode であれば nodeValue を取得するなどすれば、 プロセス API メソッドからその行内の各セルの値にアクセスできます。

上記の getText 関数に実装例を示します。

その他プロセス API メソッドでは、$(this).parent() でその行の tr が取得でき、$(this).parent().parent() で thead が取得できます。

小山圭介 著者
小山 圭介
4/15/1973生
米国在住のソフトウェアエンジニア。ITコンサルタント.. »プロフィール

© 2011-2017 Keisuke Oyama jQuery 入門