線上書籍

Home

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

一、 關於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):
  6. <?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. 必要時可以加入 圖檔以清楚告知選項可拉動。
  9. <img src='".XOOPS_URL."/modules/tadtools/treeTable/images/updown_s.png' style='cursor: s-resize;margin:0px 4px;' alt='拉動排序' title='拉動排序'>