TableKitでダイナミックなテーブル編集
TableKitが便利だという記事がいくつかあるので、実際にどれほど便利か試してみた。
基本的な使い方だけでも、簡単に。
- 手順1.TableKitの公式サイトへ
- 手順2.Demo & Downloadからファイル一式をダウンロード
- 手順3.jsファイルを任意のフォルダへコピー
- HTMLにjsファイルを読み込み
- フィールド編集用のURIを指定
- サンプルはZend FrameworkのAdminItemコントローラーのajaxCellEditアクションを指定
- thead > tr >td(th)にid属性を指定。これがフィールド名になる。
- tbody > tr のid属性には商品のユニークIDを指定
- 以下ループ
- 編集不可にしたい場合はクラスにnoeditを指定。
以下、サンプルHTML
<script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/fastinit.js"></script> <script type="text/javascript" src="js/tablekit.js"></script> <script type="text/javascript"> // Ajax TableKit.options.editAjaxURI = 'sample-host/admin-item/ajax-cell-edit/'; </script> <table class="sortable resizable editable"> <thead> <tr align="center"> <td class="sortcol" id="code"><strong>商品コード</strong></td> <td class="sortcol" id="name"><strong>商品名</strong></td> <td class="sortcol" id="stock"><strong>在庫</strong></td> <td class="sortcol" id="price"><strong>金額</strong></td> </tr> </thead> <tbody> <tr align="center" id="1"> <td align="center" class="noedit">SW-01</td> <td align="left" class="noedit">サムライソード</td> <td align="center">5</td> <td align="right">1500000円</td> </tr> <tr align="center" id="2"> <td align="center" class="noedit">SW-02</td> <td align="left" class="noedit">アメザリ刀</td> <td align="center">2</td> <td align="right">50000円</td> </tr> </tbody> </table>
以下サーバーサイド側
- id,field,valueが渡されるので、それを基にテーブル内容を変更。
- 変更結果のvalueを出力
- 出力内容がテーブルのセルに反映される
- 変更結果のvalueを出力
<?php /* * Ajaxアクション * */ function ajaxCellEditAction(){ // ↓これでどんな値が渡されるか確認 // var_dump($this->_getAllParams()); // パラメータ $id=$this->_getParam("id"); $field=$this->_getParam("field"); $value=$this->_getParam("value"); // フィールド更新 ItemManager::update($id,$field,$value); echo $value; } ?>
とりあえず、こんな感じ。