Flexigrid
Jqueryベースのテーブル修飾script、FlexigridをZend Frameworkで使ってみよう、という習作です。
マイコミの記事を参考にしながら作ってみました。
テーブルデータは
id,title,description,date
のありがちな感じで。
とりあえずは、テンプレート。Smartyで作ってありますが、HTMLそのままですから、他のテンプレートでも問題ないでしょう。
SMARTY:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<meta http-equiv="content-type" content="text/html; utf-8" />
-
<meta http-equiv="Content-Language" content="Japanese" />
-
<title>Flexigrid Test</title>
-
<link href="/js/flexigrid/css/flexigrid.css" rel="stylesheet" type="text/css">
-
<script type="text/javascript" src="/js/jquery.js"></script>
-
<script type="text/javascript" src="/js/flexigrid/flexigrid.js"></script>
-
<script type="text/javascript"><!--
-
$(document).ready(function() {
-
$('#ftable').flexigrid({
-
url: '/flexigrid/json/',
-
dataType: 'json',
-
colModel : [
-
{display:
'ID',
name :
'id', width :
20, sortable : true, align:
'left'},
-
{display:
'TITLE',
name :
'title', width :
340, sortable : true, align:
'left'},
-
{display:
'DESC',
name :
'description', width :
30, sortable : true, align:
'left'},
-
{display:
'DATE',
name :
'date', width :
100, sortable : true, align:
'center'}
-
],
-
searchitems : [
-
-
{display:
'TITLE',
name :
'title', isdefault: true
}
-
],
-
sortname: "id",
-
sortorder: "DESC",
-
usepager: true,
-
title: 'Flexigrid Test',
-
useRp: true,
-
rp: 20,
-
showTableToggleBtn: true,
-
width: 700,
-
height: 400
-
}
-
); });
-
// --></script>
-
</head>
-
<body>
-
<table id="ftable">
-
</table>
-
</body>
-
</html>
確かjqueryは$(){～だけで、ready()の効果があるような気がしたけど、とりえあず。
Flexigrid本体は、ダウンロード>解凍したものを、ルート/js/flexigrid/の中に直接放り込んであります。今回はjqueryだけ、別途用意したものを読み込んでいますので、pathにご注意ください。
このテンプレートを/flexigrid/index.tplとして保存。
次は、コントローラ部。
上記、ajax部で、/flexigrid/json/を呼んでいますので、jsonActionを内包したコントローラとなります。
PHP:
-
<?php
-
class FlexigridController extends Zend_Controller_Action
-
{
-
public function indexAction()
-
{
-
}
-
-
public function jsonAction()
-
{
-
// 出力にテンプレートを使わないので、NoRender。
-
$this->_helper->viewRenderer->setNoRender();
-
-
// postリクエスト以外には応対しない。
-
if (!$this->_request->isPost()) {
-
return;
-
}
-
-
// リクエストのフィルタリング。
-
$f = new Zend_Filter_StripTags();
-
-
$qtype = $f->filter($this->_request->getPost('qtype'));
-
$query = $f->filter($this->_request->getPost('query'));
-
$page = $f->filter($this->_request->getPost('page',1));
-
$rp = $f->filter($this->_request->getPost('rp',10));
-
$sortname = $f->filter($this->_request->getPost('sortname', 'id'));
-
$sortorder = $f->filter($this->_request->getPost('sortorder', 'desc'));
-
-
// 該当テーブルの読込。
-
$table = new Table();
-
-
// レコードの総数を求める。（もっと良い方法ありませんか？(^_^;)
-
// いつもはテーブルクラス側にｃｏｕｎｔ()メソッドを作ってsqlを走らせてます）
-
$count = $table->select()->from($table, 'count(id)')
-
->query()->fetchColumn();
-
-
// クエリ。
-
$select = $table->select();
-
$select->limitPage($page, $rp)->order("$sortname DESC");
-
if ($qtype && $query) {
-
$select->where($qtype . ' like ?', $query);
-
}
-
$rows = $select->query()->fetchAll();
-
-
// jsonの作成。
-
-
(
-
'page' => (int) $page,
-
'total' => (int) $count,
-
);
-
foreach ($rows as $row) {
-
-
$tmp[] = $row['id'];
-
$tmp[] = $row['title'];
-
$tmp[] = $row['description'];
-
$tmp[] = $row['date'];
-
$json['rows'][] =
array('cell' =>
$tmp);
-
}
-
-
}
-
}
最後、array $jsonに放り込んでいるところは、array_valuesでもっとスマートにいくんじゃないかな。
前提条件として、Zend_Db_Table_Abstractを継承した、`table`クラスがあるとしています。
こんな感じで
PHP:
-
class Table Extends Zend_Db_Table_Abstract
-
{
-
}
特に何もいりませんが。
無事、動作しましたでしょうか？
prototypeよりjqueryという方は、flexigrid、良いと思います。
