2008/7/11 金曜日

Zend FrameworkでFlexigrid習作

Filed under: Jquery, Javascript, ツール — ne-zu @ 23:51:38 このエントリをはてなブックマークに追加

Flexigrid

Jqueryベースのテーブル修飾script、FlexigridをZend Frameworkで使ってみよう、という習作です。

マイコミの記事を参考にしながら作ってみました。

テーブルデータは
id,title,description,date
のありがちな感じで。

とりあえずは、テンプレート。Smartyで作ってありますが、HTMLそのままですから、他のテンプレートでも問題ないでしょう。

SMARTY:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; utf-8" />
  5. <meta http-equiv="Content-Language" content="Japanese" />
  6. <title>Flexigrid Test</title>
  7. <link href="/js/flexigrid/css/flexigrid.css" rel="stylesheet" type="text/css">
  8. <script type="text/javascript" src="/js/jquery.js"></script>
  9. <script type="text/javascript" src="/js/flexigrid/flexigrid.js"></script>
  10. <script type="text/javascript"><!--
  11. $(document).ready(function() {
  12.     $('#ftable').flexigrid({
  13.         url: '/flexigrid/json/',
  14.         dataType: 'json',
  15.         colModel : [
  16.             {display: 'ID', name : 'id', width : 20, sortable : true, align: 'left'},
  17.             {display: 'TITLE', name : 'title', width : 340, sortable : true, align: 'left'},
  18.             {display: 'DESC', name : 'description', width : 30, sortable : true, align: 'left'},
  19.             {display: 'DATE', name : 'date', width : 100, sortable : true, align: 'center'}
  20.         ],
  21.         searchitems : [
  22.             {display: 'ID', name : 'id'},
  23.             {display: 'TITLE', name : 'title', isdefault: true}
  24.         ],
  25.         sortname: "id",
  26.         sortorder: "DESC",
  27.         usepager: true,
  28.         title: 'Flexigrid Test',
  29.         useRp: true,
  30.         rp: 20,
  31.         showTableToggleBtn: true,
  32.         width: 700,
  33.         height: 400
  34.     }
  35. ); });
  36. // --></script>
  37. </head>
  38. <body>
  39.     <table id="ftable">
  40.     </table>
  41. </body>
  42. </html>

確かjqueryは$(){~だけで、ready()の効果があるような気がしたけど、とりえあず。
Flexigrid本体は、ダウンロード>解凍したものを、ルート/js/flexigrid/の中に直接放り込んであります。今回はjqueryだけ、別途用意したものを読み込んでいますので、pathにご注意ください。
このテンプレートを/flexigrid/index.tplとして保存。

次は、コントローラ部。
上記、ajax部で、/flexigrid/json/を呼んでいますので、jsonActionを内包したコントローラとなります。

PHP:
  1. <?php
  2. class FlexigridController extends Zend_Controller_Action
  3. {
  4.     public function indexAction()
  5.     {
  6.     }
  7.    
  8.     public function jsonAction()
  9.     {
  10.         // 出力にテンプレートを使わないので、NoRender。
  11.         $this->_helper->viewRenderer->setNoRender();
  12.        
  13.         // postリクエスト以外には応対しない。
  14.         if (!$this->_request->isPost()) {
  15.             return;
  16.         }
  17.  
  18.         // リクエストのフィルタリング。
  19.         $f = new Zend_Filter_StripTags();
  20.        
  21.         $qtype = $f->filter($this->_request->getPost('qtype'));
  22.         $query = $f->filter($this->_request->getPost('query'));
  23.         $page = $f->filter($this->_request->getPost('page',1));
  24.         $rp = $f->filter($this->_request->getPost('rp',10));
  25.         $sortname = $f->filter($this->_request->getPost('sortname', 'id'));
  26.         $sortorder = $f->filter($this->_request->getPost('sortorder', 'desc'));
  27.  
  28.         // 該当テーブルの読込。
  29.         $table = new Table();
  30.  
  31.         // レコードの総数を求める。(もっと良い方法ありませんか?(^_^;)
  32.         //                             いつもはテーブルクラス側にcount()メソッドを作ってsqlを走らせてます)
  33.         $count = $table->select()->from($table, 'count(id)')
  34.             ->query()->fetchColumn();
  35.  
  36.         // クエリ。
  37.         $select = $table->select();
  38.         $select->limitPage($page, $rp)->order("$sortname DESC");
  39.         if ($qtype && $query) {
  40.             $select->where($qtype . ' like ?', $query);
  41.         }
  42.         $rows = $select->query()->fetchAll();
  43.        
  44.         // jsonの作成。
  45.         $json = array
  46.         (
  47.             'page' => (int) $page,
  48.             'total' => (int) $count,
  49.         );
  50.         foreach ($rows as $row) {
  51.             $tmp = array();
  52.             $tmp[] = $row['id'];
  53.             $tmp[] = $row['title'];
  54.             $tmp[] = $row['description'];
  55.             $tmp[] = $row['date'];
  56.             $json['rows'][] = array('cell' => $tmp);
  57.         }
  58.         echo json_encode($json);
  59.     }
  60. }

最後、array $jsonに放り込んでいるところは、array_valuesでもっとスマートにいくんじゃないかな。
前提条件として、Zend_Db_Table_Abstractを継承した、`table`クラスがあるとしています。
こんな感じで

PHP:
  1. class Table Extends Zend_Db_Table_Abstract
  2. {
  3. }

特に何もいりませんが。

無事、動作しましたでしょうか?
prototypeよりjqueryという方は、flexigrid、良いと思います。

関連する記事:

Powered by

コメント (0) »

この記事にはまだコメントがついていません。

コメント RSS トラックバック URL

コメントをどうぞ

Powered by PHP-SeeD and WordPress ME