[1012]PHP進階開發及TadTools工具應用
一、 關於jQuery UI
- sortable是jQuery UI（http://jqueryui.com）內建的功能之一，換言之，要使用之，必須引入jQuery UI才行。
- 此外，jQuery UI還有Draggable、Droppable、Resizable、Selectable等互動功能，並提供了許多佈景、效果（Effects）以及現成的小工具（Widgets）
二、 使用拉動排序的方法
- 利用$jquery=get_jquery(true);載入jQuery UI
- 在輸出畫面之前載入相關jQuery設定（http://api.jqueryui.com/sortable）
$jquery
<script type='text/javascript'>
$(document).ready(function(){
$('#sort').sortable({ opacity: 0.6, cursor: 'move', update: function() {
var order = $(this).sortable('serialize');
$.post('save_sort.php', order, function(theResponse){
$('#save_msg').html(theResponse);
});
}
});
});
</script>
- (1) opacity：用來設定拉動時的透明度，其值從0.01 到 1。
- (2) cursor：拉動時，滑鼠游標形狀設定
- 把欲排序的表格範圍加上<tbody id='sort' >欲排序的表格</tbody>
- 將<tbody>中的每一個<tr>加上id，格式如：「名稱_編號」，例如：<tr id='tr_{$gsn}'>，如此，$(this).sortable('serialize') 就會將id拆解成變數名稱及值，亦即用$.post()送出後，php檔案會接收到$_POST['tr']的陣列，其值就是$gsn。
- 負責儲存排序的PHP檔（save_sort.php）：
<?php
include_once "header_admin.php";
$sort = 1;
foreach ($_POST['tr'] as $gsn) {
$sql="update ".$xoopsDB->prefix("contact_cate")." set `sort`='{$sort}' where `gsn`='{$gsn}'";
$xoopsDB->queryF($sql) or die("更新失敗！ (".date("Y-m-d H:i:s").")");
$sort++;
}
echo "排序完成！ (".date("Y-m-d H:i:s").")";
?>
- 加入<div id='save_msg'></div>到表格頁面，以呈現處理結果訊息。
- 必要時可以加入 圖檔以清楚告知選項可拉動。
<img src='".XOOPS_URL."/modules/tadtools/treeTable/images/updown_s.png' style='cursor: s-resize;margin:0px 4px;' alt='拉動排序' title='拉動排序'>