jQuery UIを使ってMySQLデータの並べ替え

こんな感じのUI(ユーザーインターフェイス)を使ってMySQLのデータを並べ替える方法を考えます。
サンプル
(サンプルのソースはMySQLもPHPも使っていません。恥ずかしいので見ないで下さいw)

サンプルを見て頂き、やりたいことは伝わったと思います。
まずはjQueryを使ってUIを作っていきましょう。

内でGoogleのjQueryをロードしましょう。今回はjQueryUIも必要になります。

JavaScript部

sortableとliには適当にCSSを適用

HTML部

サンプルを動かしてもらえば分かるように、で囲まれたデータをカンマ区切りで送信します。これを元にMySQLのデータを並べ替えましょう。
MySQLのTable名はUserでJunjoという列があるとします。

sort.php

1,2,3,4,5という順序だったデータを2,1,3,4,5と並べ替えたい場合、sort.phpの$arrIDsは
$arrIDs[0] = 2;
$arrIDs[1] = 1;
$arrIDs[2] = 3;
$arrIDs[3] = 4;
$arrIDs[4] = 5;

となります。このデータを用いてSQL文では
順序が2のデータには0を
順序が1のデータには1を
順序が3のデータには2を
順序が4のデータには3を
順序が5のデータには4を
UPDATEするようになっています。

もちろんWHERE文を用いても同じことができるのですが、そうするとレコードの数だけSQL文を実行しなければならずコストがかかります。
CASE ~ WHEN ~ THEN ~は便利なので是非使いたいですね。

関連記事

コメントを残す

メールアドレスが公開されることはありません。

Trackback URL

管理者の承認後に表示します。