前回前々回に続き、jQueryのプラグインをみていこう。今回はテーブルデータの順番をドラッグ操作で入れ替えるTable Drag and Drop、ソート対応のリッチなグリッド表を生成するTableFixedHeader、テーブル形式のデータをチャート画像に変換するVisualize、ソースコードを構文ハイライト表示するSnippetを紹介する。

テーブルデータの順番をドラッグ操作で入れ替える
Table Drag and Drop

[URL]http://www.isocra.com/2008/02/
table-drag-and-drop-jquery-plugin/

[必要なファイル]jquery.tablednd_0_5.js

テーブルの行をドラッグ&ドロップで並べ替え(並び順を表の下に表示)
テーブルの行をドラッグ&ドロップで並べ替え(並び順を表の下に表示)

 Table Drag and Dropは、テーブルの行をドラッグ&ドロップで並べ替えるためのプラグインです。例えば、リスト1は、並べ替え可能な「読みたい本ランキング」を想定しています。まずは、並べ替え対象のテーブルを(1)のように準備します。並べ替え対象の行に<th>タグを含めると、うまく動作しないことがありましたので、データ行は<td>タグのみでマークアップするようにしてください。

リスト1●テーブルの行をドラッグ&ドロップで並べ替え(tablednd.html)
[画像のクリックで拡大表示]

 あとは、(2)のようにtableDnDメソッドを呼び出すことで、テーブルにドラッグ&ドロップ機能を追加できます。ドラッグ開始時、ドロップ時の動作は、tableDnDメソッドのonDragStart/onDropオプションとして指定します。

 まずはドラッグ開始時の操作からです((3))。関数の引数には、対象となるテーブルtableと行(row)が渡されますので、ここではドラッグ行のid値を取得し、メッセージを表示しています。

 ドロップ時にも同じくtable、rowという引数を受け取りますので((4))、ここではテーブル配下のすべてのデータ行を取得し、そのid値を並び順に取得&表示しています。サンプルではただ並べ替えの結果を表示しているだけですが、この情報をサーバに送信し、データベースなどに保存しておけば、現在の並び順を維持することもできるでしょう。

 ちなみに、現在の並び順をもっと簡単に取得したいならば、「$.tableDnD.serialize()」メソッドを利用しても構いません。「list[]=2&list[]=3&list[]=1&~」のような形式で現在の並び順を取得できますので、サーバにも簡単に情報を引き渡すことができます。

jQuery UIとは
 jQuery UIは、言うなれば公式に提供されているjQueryプラグインの一種です。Interactions(ドラッグ&ドロップやサイズ変更、選択などの対話操作)、Widgets(アコーディオン、オートコンプリート機能などのUI部品)、Effect(標準アニメーションの拡張)など、UIに関わる機能を提供します。本稿では、PluploadやTableFixedHeaderプラグインがjQuery UIを内部的に利用しています。配布サンプルには既に配置済みですので、そのまま利用してください。

この先は会員の登録が必要です。有料会員(月額プラン)は登録月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら