こんな感じのUI(ユーザーインターフェイス)を使ってMySQLのデータを並べ替える方法を考えます。
サンプル
(サンプルのソースはMySQLもPHPも使っていません。恥ずかしいので見ないで下さいw)
サンプルを見て頂き、やりたいことは伝わったと思います。
まずはjQueryを使ってUIを作っていきましょう。
<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 ~は便利なので是非使いたいですね。