TableKit記事の続きのようなもの
PHPの種 ブログ » TableKitのEditに対応するコントローラアクション習作
でも取り上げたTableKitですが、HTML部分のほうをシンプルな形であげておきます。もちろんTablekitのDEMOのindex.htmlを見ればそれで十分なのですが、自分用のメモとして＆これだけ簡単なHTMLでもTablekitを使うことができるんだよ、という参考になればと思います。
Smartyを使っていますが、まあ普通のHTMLと解釈しても特に問題ないでしょう。
SMARTY:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-
<html>
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
-
<title>Tablekit Test</title>
-
</head>
-
<body>
-
<div>
-
<table class="sortable resizable editable">
-
<thead>
-
<tr>
-
<th class="noedit" id="id">id</th>
-
<th id="name">name</th>
-
<th id="type">type</th>
-
</thead>
-
<tfoot>
-
<tr><td>id</td><td>name</td><td>type</td></tr>
-
</tfoot>
-
<tbody>
-
<tr id="{$hoge.id|escape}">
-
<td>{$hoge.id|escape}</td>
-
<td>{$hoge.name|escape}</td>
-
<td>{$hoge.type|escape}</td>
-
</tr>
-
</tbody>
-
</table>
-
</div>
-
<a href="/insert/">Insert</a>
-
<script type="text/javascript" src="scriptaculous/lib/prototype.js"></script>
-
<script type="text/javascript" src="fastinit.js"></script>
-
<script type="text/javascript" src="tablekit.js"></script>
-
<script type="text/javascript">
-
TableKit.options.editAjaxURI = '/update/';
-
</script>
-
-
</body>
-
</html>
Tableに必要とするID、CLASSをつけてTablekitスクリプト群を読み込んでるだけですね。非常に簡単です。
Editableなやりとりは、PHPの種 ブログ » TableKitのEditに対応するコントローラアクション習作を参考にしてください。
もちろんもっと素晴らしい機能がありますので、知りたい方はDEMOを参考にしてください。
関連する記事:
- Smartyでオブジェクトを操る時の問題解決＞プロパティを配列の添え字に使用できない？
- foreachの罠に引っかからない
- 同じ処理が行える時、forを使うかforeachを使うか？
- さくらサーバでPHPを使って空メール受信
- TableKitのEditに対応するコントローラアクション習作
Powered by MightyAdsense
トラックバック URL :
