Wiki Navigation

Top > 開発ガイド > Spinelzリファレンス > Selectable Table

Selectable Table

概要

テーブル(HTMLのTABLEタグ)の各行を選択可能にします
行を選択して編集や削除を行う等、従来のチェックボックスの機能を代替可能です
ShiftやCtrlによる複数選択にも対応しています

利用方法

<script type="text/javascript" src="/path/to/javascripts/spinelz_lib/prototype.js"></script>
<script type="text/javascript" src="/path/to/javascripts/spinelz_lib/scriptaculous.js"></script>
<script type="text/javascript" src="/path/to/javascripts/spinelz_lib/spinelz_util.js"></script>
<script type="text/javascript" src="/path/to/javascripts/spinelz/selectableTable.js"></script>
<link rel="stylesheet" href="/path/to/stylesheets/spinelz/selectableTable.css" type="text/css">
<table id="selectable_table">
  <thead>
    <tr>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr id="1">
      <td>tanaka</td>
    </tr>
    <tr id="2">
      <td>suzuki</td>
    </tr>
    <tr id="3">
      <td>sato</td>
    </tr>
    <tr id="4">
      <td>yamada</td>
    </tr>
  </tbody>
</table>
<script type="text/javascript">
  var selectable_table;
  selectable_table = SelectableTableCreator.create(
    'selectable_table',
    {
      arrayDefaultData:                 ['New Data'],
      flagAllowUnselect:                false,
      flagInitialAllowMultiple:         false,
      flagKeypressAvailable:            false,
      flagKeypressDeleteAvailable:      false,
      flagKeypressInsertAvailable:      false,
      functionPostAdd:                  Prototype.emptyFunction,
      functionPostDelete:               Prototype.emptyFunction,
      functionPostPressLeft:            Prototype.emptyFunction,
      functionPostPressRight:           Prototype.emptyFunction,
      functionPostSelect:               Prototype.emptyFunction,
      functionPostUnselect:             Prototype.emptyFunction,
      functionPreAdd:                   function() {return true;},
      functionPreDelete:                function() {return true;},
      functionSubmit:                   function(id) {alert(id);},
      prefixTrId:                       'rubricks_sample_',
      prefixCSS:                        'custom_'
    },
    selectable_table
  );
</script>

※ 制限事項

必ず<tbody>タグを使用して下さい。<tbody>要素内の<tr>要素が選択可能となります。
選択可能にしたくない行(表見出し等)は<thead>要素として記述して下さい。
<tbody>要素内の<tr>要素には必ず数字のIDを付与して下さい。(Railsと連携する場合、AR-IDを用いると幸せになれるかもしれません)

オプション

オプション名	デフォルト値	説明
arrayDefaultData	[]	add()関数を引数無しで実行した際に適用されるデフォルトデータ
flagAllowUnselect	true	選択状態の行を選択解除可能にするかどうか
flagInitialAllowMultiple	false	初期表示時に複数選択可能モードにするかどうか
flagKeypressAvailable	false	キー入力(方向キー及びエンターキー)による操作を有効にするかどうか trueにする場合はこちらも参照して下さい
flagKeypressDeleteAvailable	false	キー入力(Deleteキー)による削除を有効にするかどうか
flagKeypressInsertAvailable	false	キー入力(Insertキー)による追加を有効にするかどうか
functionPostAdd	Prototype.emptyFunction	add()関数終了後に実行されるコールバック関数
functionPostDelete	Prototype.emptyFunction	delete()関数終了後に実行されるコールバック関数
functionPostPressLeft	Prototype.emptyFunction	左方向キー押下時に実行されるコールバック関数
functionPostPressRight	Prototype.emptyFunction	右方向キー押下時に実行されるコールバック関数
functionPostSelect	Prototype.emptyFunction	select()関数終了後に実行されるコールバック関数
functionPostUnselect	Prototype.emptyFunction	unselect()関数終了後に実行されるコールバック関数
functionPreAdd	function() {return true;}	add()関数開始前に実行されるコールバック関数(trueをリターンするとadd()が実行される)
functionPreDelete	function() {return true;}	delete()関数開始前に実行されるコールバック関数(trueをリターンするとdelete()が実行される)
functionSubmit	Prototype.emptyFunction	単数選択モード時に限りselect()関数終了後に実行されるコールバック関数
prefixTrId	'selectable_table_'	<tr>要素のIDに付加するプレフィックス文字列
prefixCSS	'custom_'	カスタムスタイルシートのプレフィックス文字列

API

add(array)

最後尾に行を追加します。

引数	説明
array	追加する行の<td>要素のinnerHTML

deleteAll()

選択状態の行を削除します。

getSelected()

選択状態の行を取得します。リターン値は<tr>要素のIDの配列となります。

makeAvailable()

SelectableTableの機能を有効化します。

makeMultiple()

複数選択可能モードにします。

makeSingular()

単数選択モードにします。

makeUnavailable()

SelectableTableの機能を無効化します。

selectAll()

全ての行を選択します。(単数選択モード時は機能しません)

unselectAll()

全ての選択を解除します。

Download in other formats:

Plain Text