- 2009-07-07 (火) 18:26
- jQuery
前回 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 /* ←追加 */ });
表示したのが下記です。
これで表示部とデータ出力を完全に分けられるのではないかと思います。
- Older: jQueryのFlexigridを使ってみた
Comments:2
- SLT-A65 11-11-18 (金) 6:53
-
私は非常にここに有益なリードの一人一人に感謝。私は最も確かに人々とあなたのサイトについてのフレーズを分散します。乾杯。
- johnl 11-12-24 (土) 1:52
-
非常に参考になりました!ありがとう~!
Trackbacks:1
- Trackback URL for this entry
- http://blog.cuegraphix.com/wp-trackback.php?p=98
- Listed below are links to weblogs that reference
- jQueryのFlexigridを使ってみた(2) データ成形編 from blog.cuegraphix.com
- pingback from JQueryのFlexiGrid(json)の簡単な使い方 | WEB | C# カフェ ~プログラマー達の憩い場 12-10-28 (日) 20:24
-
[...] jQueryのFlexigridを使ってみた(2) データ成形編 → まさにこのページのお手本となったページ。幾つかオプションは追加したけどね。 [...]