Tad 教材網 - 線上書籍

:::

\[1012\]PHP進階開發及TadTools工具應用
============================

[![](http://tad0616.net/uploads/dl.gif)](http://www.tad0616.net/uploads/tad_book3/file/1012/06.pdf)

### 一、 關於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>） ```
  <pre class="brush: php;" title="code">
  $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）：
 ```
<pre class="brush: php;" title="code">
<?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").")";
?>
```

7. 加入<div id='save\_msg'></div>到表格頁面，以呈現處理結果訊息。
8. 必要時可以加入 圖檔以清楚告知選項可拉動。
 ```
<pre class="brush: xhtml;" title="code">
<img src='".XOOPS_URL."/modules/tadtools/treeTable/images/updown_s.png' style='cursor: s-resize;margin:0px 4px;' alt='拉動排序' title='拉動排序'>
```

:::