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

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

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

内でGoogleのjQueryをロードしましょう。今回はjQueryUIも必要になります。[html]<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
</head>[/html]

JavaScript部[javascript]
$(function(){
//ID:sortableは<ul>に適用します。
$(‘#sortable’).sortable();
$(‘#sortable’).disableSelection();
//ID:submitSortableは<input type="button">に適用します。
$(‘#submitSortable’).click(function(){
var itemIDs = ”;
$(‘#sortable li’).map(function(){
itemIDs += $(this).children(‘span’).text() + ‘,’;
});
//非同期通信で取得したデータを送信します。
//処理の内容はPHP部で説明します。
$.get(‘sort.php’,
{IDs:itemIDs},
function(data){
alert(‘登録しました。’);
}
);
});
});
[/javascript]

sortableとliには適当にCSSを適用
[css]
#sortable {
list-style-type: none;
width:20%;
}
#sortable li {
cursor: move;
border:1pt solid black;
margin:5px 0px;
padding:3px;
background-color:#CC9;
}
/* 送信するデータを隠したい場合はSPANを隠す */
#sortable span{
visibility:hidden;
}
[/css]

HTML部
[html]
<ul id="sortable">
<!–
<span></span>で囲まれた部分が送信されます。
実際は<li></li>はMySQLからデータを引っ張ってきて作ります。
<span></span>にはsort.phpで説明するJunjo列が入っているものとします。
–>
<li class="ui-state-default">項目1 – <span>1</span></li>
<li class="ui-state-default">項目2 – <span>2</span></li>
<li class="ui-state-default">項目3 – <span>3</span></li>
<li class="ui-state-default">項目4 – <span>4</span></li>
<li class="ui-state-default">項目5 – <span>5</span></li>
</ul>
<input type="button" id="submitSortable" class="button" value="この並び順を送信">
[/html]

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

sort.php
[php]
//データの取得
$IDs = $_GET[‘IDs’];

//末尾がカンマなので1文字削る
$IDs = substr($IDs, 0, -1);

//カンマで切って配列にする
$arrIDs = explode(‘,’, $IDs);

$Query = "UPDATE User ";
$Query.= "SET Junjo = CASE ";
foreach($arrIDs as $key=>$value){
$Query.= "WHEN Junjo = ".$value." ";
$Query.= "THEN ".$key." ";
}
$Query.= "ELSE Junjo END";

//このクエリ文を実行してください。
[/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 ~は便利なので是非使いたいですね。

スポンサーリンク
レクタングル大