jQueryのFlexigridを使ってみた(2) データ成形編

前回 Flexigrid のパラメータのメモを残しましたが、表をHTMLに表示する際、データベースのデータをそのまま表示するのではなく、表示用に変換させてから表示するという場合が少なくありません。

たとえば表に画像を表示したり、詳細ページのリンクを張ったりと。

出力する JSON なり XML 自体を変換して出力してやれば済む話なんですが、タグをそのまま出力するのでエスケープ処理をさせたりしなくちゃならない。
なんとなくここまできたら表示部は表示部で分離させたい！となりました。

で、いろいろ模索してると見つけました！

パラメータに preProcess というメソッドを指定することができ、データ取得時の表示直前に全読み込みデータを引数として渡されます。

たとえば下記のようなデータを読み込むとします。

{
page: 1,
total: 5,
rows: [
{id:'1',cell:['1','normal','テスト1','2009/07/07 15:32:27']},
{id:'2',cell:['2','sad','テスト2','2009/07/06 21:04:30']},
{id:'3',cell:['3','smile','テスト3','2009/07/06 13:18:29']},
{id:'4',cell:['4','smile','テスト4','2009/07/05 19:46:41']},
{id:'5',cell:['5','sad','テスト5','2009/07/05 15:25:15']}
]
}

そして、Flexigrid を次のように設定して出力してみます。

$("#flex1").flexigrid({
	url: 'post.json',
	dataType: 'json',
	colModel : [
		{display: 'ID', name : 'id', width : 40, sortable : true, align: 'center'},
		{display: '気分', name : 'feel', width : 40, sortable : false, align: 'center'},
		{display: '件名', name : 'name', width : 200, sortable : true, align: 'left'},
		{display: '作成日', name : 'date', width : 120, sortable : true, align: 'left'},
		{display: 'リンク', name : 'link', width : 80, sortable : false, align: 'center'}
		],
	width: 600,
	height: 'auto'
});

このような結果になります。

このデータを preProcess メソッドを設定し表示を変更します。
まずデータ内容を変更させるデータ受け取り関数を作成します。

function _preProcess( data ){
	$.each( data.rows,
		function(i,val) {
			val.cell[1] = '<img src="img/'+val.cell[1]+'.gif" width="12" height="12" />';

			var date = new Date(Date.parse(val.cell[3]));
			val.cell[3] = (date.getMonth()+1) + "月" + date.getDate() + "日" + date.getHours() + "時" + date.getMinutes() + "分";

			val.cell[4] = '<a href="hoge.php?id='+val.cell[0]+'">詳細</a>';
		}
	);
	return data;
}

・セル1の気分データを同名の画像を表示するように変更
・セル3の日付データを日本語表記に変更
・セル4はデータとして存在しないが追加してIDを引数とした詳細ページへのリンクを設定

という処理をします。
そして、Flexigrid の設定を変更します。

$("#flex1").flexigrid({
	url: 'post.json',
	dataType: 'json',
	colModel : [
		{display: 'ID', name : 'iso', width : 40, sortable : true, align: 'center', labelFunction: function(data){ return '<a href="aaaaa.cgi?id='+data+'">詳細</a>'; }},
		{display: '気分', name : 'feel', width : 40, sortable : false, align: 'center'},
		{display: '件名', name : 'name', width : 200, sortable : true, align: 'left'},
		{display: '作成日', name : 'date', width : 120, sortable : true, align: 'left'},
		{display: 'リンク', name : 'link', width : 80, sortable : false, align: 'center'}
		],
	width: 600,
	height: 'auto',
	preProcess: _preProcess  /* ←追加 */
});

表示したのが下記です。

デモ

これで表示部とデータ出力を完全に分けられるのではないかと思います。