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>） ```
    
    $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").")";
?>
```

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

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

:::

搜尋

進階搜尋

QR Code 區塊

https%3A%2F%2Ftad0616.net%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D763

快速登入

書籍目錄

展開 | 闔起

線上使用者

116人線上 (76人在瀏覽線上書籍)

會員: 0

訪客: 116

更多…

MarkDown

搜尋

QR Code 區塊

快速登入

書籍目錄

線上使用者