[jQuery UI] MySQL から取得したデータをドラッグで並び替える

MySQL から取得したデータを並び替えする時、「↑」とか「↓」の矢印を付けて1レコードずつ並び順を変更していました。これを iOS アプリの UITableView みたいに並び替えできないかなと思っていたら、jQuery UI というライブラリを使用すれば比較的簡単に実装出来るみたいでした。

jQuery UI とは

jQuery UI は、高度なユーザインターフェースを実装できるライブラリです。jQuery UI を使用すれば、要素のドラッグ＆ドロップ・リサイズ・選択・並べ替えなどが容易に実装出来ます。

jQuery UI / PHP で MySQL のデータを並び替える

今回は、こちらの記事で構築したローカル環境で MySQL と PHP を動作させました。

MySQL に kurage テーブルを作成し、その並び順を変更する php ファイルを例として作成しました。

ここからは、実装する上で使用したコードを解説していきます。

PHP：テーブルの作成、並び順の変更、並び順にデータを取得

テーブルの作成と並び順にデータを取得する部分は、普通だと思うので説明を省きます。並び順を変える部分ですが、こちらは POST で受け取った並び順が格納された result がある場合に処理が行われます。

この並び順データは、後述する jQuery によって生成されるます。

<?php

// データベース接続
mysql_connect('localhost', 'root', 'root');
mysql_select_db('database');
mysql_query('SET NAMES UTF8');

// テーブルが存在しない場合は作成する
if (mysql_query('SELECT 1 FROM kurage') == FALSE) {
  $sql = "CREATE TABLE kurage (id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY, name TEXT, sort INT UNSIGNED)";
  mysql_query($sql);

  // 初期データを登録する
  $kurages = array("プラヌラ", "ポリプ", "ストロビラ", "エフィラ", "稚クラゲ", "成体");
  for ($i = 0; $i < count($kurages); $i++) {
    $sql = "INSERT INTO kurage SET name = '{$kurages[$i]}', sort = '{$i}'";
    mysql_query($sql);
  }  
}

// 並び順が POST に格納されている場合は、並び順を変える
$result = $_POST['result'];
if ($result != NULL) {
  // データの id が「,」区切りで順番に格納されているデータを配列に変換する
  $ids = explode(",", $result);
  for ($i = 0; $i < count($ids); $i++) {
    $id = $ids[$i] + 0;
    $sql = "UPDATE kurage SET sort='{$i}' WHERE id='{$id}'";
    mysql_query($sql);
  }
}

// ソート順にデータを取得する
$sql = "SELECT * FROM kurage ORDER BY sort";
$recordSet = mysql_query($sql);
while ($data = mysql_fetch_assoc($recordSet)) {
  $id = $data['id'];
  $name = $data['name'];
  $list .= "<li id=\"{$id}\">{$name}</li>";
}

?>

jQuery UI：ドラッグ可能なリストを作成する

jQuery UI を使用するには、jquery.js → jquery-ui.js の順に js ファイルを読み込みます。ul タグに sortable を指定し、$("#sortable").sortable(); にすることでドラッグ可能になります。ul タグ内の li タグは、先の $list 変数に格納されています。

並び順を保存するボタンが押された後、リストの順番を result に格納し、送信されます。

<!DOCTYPE>
<html lang="ja">
<head>
<meta charset="utf-8" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.3.custom.js"></script>
</head>
<body>

<h1 style="font-size: 18px">ミズクラゲの生活環</h1>

<ul id="sortable"><?php echo $list; ?></ul>

<form action="" method="post">
  <input type="hidden" id="result" name="result" />
  <input type="submit" id="submit" value="並び順を保存する" />
</form>

<script>
$(function() {
  // ソート可能にする
  $("#sortable").sortable();
  $("#submit").click(function() {
    // result に並び順を格納する
    var result = $("#sortable").sortable("toArray");
    $("#result").val(result);
    $("form").submit();
  });
});
</script>

</body>
</html>

参考

Pocket