並び替え

データのセットを一覧する際にある列をキーに並び順をソートしたり、データのセットを編集する際に追加や削除と合わせて各レコードの順序を変更したいケースがあります。

表組のヘッダー

表組でデータの一覧表示をしている際、いずれかの列をキーにして行の並び替えをします。列のヘッダーをクリックするとその列をキーとして並び替えます。現在キーとなっている列のヘッダーをクリックすると降順／昇順が切り替わります。

ドラッグ&ドロップ

データセットの編集において各レコードの順序を変更するにあたり、対象デバイスがPC（ポインティングデバイスとしてマウスを使用する）場合、ドラッグ&ドロップによる並び替えはシンプルで自然な感覚で使えます。これは操作前、ホバー時、クリック時、ドラッグ時、ドロップ時の状態とインタラクションが適切にデザインされていることで実現できるため、これらのインタラクションの段階を明確に切り分けられないタッチデバイスでは不向きです。

表組の場合

リストの場合

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7

jQuery UIのSortableを使用しています。<table>および<ul>に適用できます。用意されているオプションや設定方法に関する詳しい情報は、jQuery UIのリソースを参照してください。

1行ずつ移動

各行の左端の上下移動のボタンをクリックするごとに1行ずつ位置が入れ替わります。