行のカスタマイズ
ここでは 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 が取得できます。