［5］テーブル、チャート、コード表示プラグインを活用する

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

［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&～」のような形式で現在の並び順を取得できますので、サーバにも簡単に情報を引き渡すことができます。