ECサイト運営開発記

PHPフレームワーク Laravelの使い方を中心とした通販サイトの開発日記

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を出力
      • 出力内容がテーブルのセルに反映される
<?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;
}
?>

とりあえず、こんな感じ。