6. 表格拉動排序

一、 關於jQuery UI

1. sortable是jQuery UI（http://jqueryui.com）內建的功能之一，換言之，要使用之，必須引入jQuery UI才行。
2. 此外，jQuery UI還有Draggable、Droppable、Resizable、Selectable等互動功能，並提供了許多佈景、效果（Effects）以及現成的小工具（Widgets）

二、 使用拉動排序的方法

1. 利用$jquery=get_jquery(true);載入jQuery UI
2. 在輸出畫面之前載入相關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：拉動時，滑鼠游標形狀設定
3. 把欲排序的表格範圍加上<tbody id='sort' >欲排序的表格</tbody>
4. 將<tbody>中的每一個<tr>加上id，格式如：「名稱_編號」，例如：<tr id='tr_{$gsn}'>，如此，$(this).sortable('serialize') 就會將id拆解成變數名稱及值，亦即用$.post()送出後，php檔案會接收到$_POST['tr']的陣列，其值就是$gsn。
5. 負責儲存排序的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").")";
?>

6. 加入<div id='save_msg'></div>到表格頁面，以呈現處理結果訊息。
7. 必要時可以加入 圖檔以清楚告知選項可拉動。

<img src='".XOOPS_URL."/modules/tadtools/treeTable/images/updown_s.png' style='cursor: s-resize;margin:0px 4px;' alt='拉動排序' title='拉動排序'>