3. 自適應表格及拉動排序

一、 用FooTable使表格隨螢幕大小自動調整欄位

1. 表格很難自適應，最多就是格子放大縮小而已，因此，我們可以想辦法，把一些比較不那麼重要的欄位，再顯示區域不夠時，暫時先將之隱藏起來。
2. 官網：https://github.com/fooplugins/FooTable
3. tadtools有兩種版本，FooTable.php是舊版，FooTable_bootstrap.php是新版，並整合bootstrap。使用方法如下：

   if(file_exists(XOOPS_ROOT_PATH."/modules/tadtools/FooTable_bootstrap.php")){
     include_once XOOPS_ROOT_PATH."/modules/tadtools/FooTable_bootstrap.php";
     $FooTable = new FooTable();
     $FooTableJS=$FooTable->render("#phone_table");
     $xoopsTpl->assign('FooTableJS' , $FooTableJS);
   }

4. 表格先設個id，如id=" phone_table"，並且在表格標題列用<thead>包起來。
5. 在表格標題<th>中，看哪些欄位要隱藏的，加上以下註記，xs(480) sm(768) md(992) lg(1200)分別代表個種不同螢幕尺寸，若有md，表示螢幕小於992就將該欄位隱藏之意。all則是不管螢幕一律隱藏（記住一個原則，註記越多，越早隱藏）

   data-breakpoints="xs sm md lg"

6. 若是bootstrap2請自行將xs改為x-small，sm改為small，md改為medium，lg改為lagre即可。
7. 假如沒有標題列，請在第一列的<td>中加入data-title屬性，以做成標題。
8. 表格排序只要在<table>中加入 data-sorting="true" 即可
9. 可在<th>用data-type來指定欄位類型，預設為text，還可指定為number或date
10. 內容過濾只要在<table>中加入 data-filtering="true" 即可

二、 拉動後自動儲存排序

1. 此功能不限用在表格，用在div、ol、ul都可以。
2. 這是利用jquery ui 的sortable功能來做的，故需用 get_jquery(true); 來載入jquery ui
3. 在每筆可以被拉動資料放上拉動圖示（需引入tad_function.php語系才能顯示）

   <img src="<{$xoops_url}>/modules/tadtools/treeTable/images/updown_s.png" style="cursor: s-resize;margin:0px 4px;" alt="<{$smarty.const._TAD_SORTABLE}>" title="<{$smarty.const._TAD_SORTABLE}>">

4. 每筆資料設個id，其格式為「變數_編號」，下例會得到一個$_POST['cate_sn']陣列變數，包含所有的cate_sn編號。

   <tr id="cate_sn_<{$data.cate_sn}>">

5. 需要有個父元件（如 tbody）將所有需要排序的內容包起來，記得設一個id

   <tbody id="sort">

6. 在表格外找個適當的地方放一個資訊框，排序完會在該元件裡顯示通知

   <div id="save_msg"></div>

7. 加入js語法，其中挑選器務必等於父元件的id值

   <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>

8. 生出save_sort.php ，用來儲存排序。下例是放在admin以下，引入檔案位置請自行調整。

   <?php
   include_once "../../../mainfile.php";
   include_once "../function.php";
   $sort = 1;
   foreach ($_POST['cate_sn'] as $cate_sn) {
       $sql = "update " . $xoopsDB->prefix("phone_book_cate") . " set `cate_sort`='{$sort}' where cate_sn='{$cate_sn}'";
       $xoopsDB->queryF($sql) or die(_TAD_SORT_FAIL . " (" . date("Y-m-d H:i:s") . ")" . $sql);
       $sort++;
   }
   echo _TAD_SORTED . "(" . date("Y-m-d H:i:s") . ")";

三、 可愛風sweet alert警告視窗

1. 官網：http://lipis.github.io/bootstrap-sweetalert/
2. 這是一個提醒視窗的套件，相當美觀。請在欲顯示刪除功能的函數或程式加入以下語法

   if (!file_exists(XOOPS_ROOT_PATH . "/modules/tadtools/sweet_alert.php")) {
       redirect_header("index.php", 3, _MA_NEED_TADTOOLS);
   }
   include_once XOOPS_ROOT_PATH . "/modules/tadtools/sweet_alert.php";
   $sweet_alert_obj        = new sweet_alert();
   $delete_phone_book_func = $sweet_alert_obj->render('delete_cate_sn_func', "{$_SERVER['PHP_SELF']}?op=delete_phone_book_cate&cate_sn=", "cate_sn");
   $xoopsTpl->assign('delete_cate_sn_func', $delete_phone_book_func);

3. render()有三個參數，第一個參數是javascript刪除函數的名稱，第二個是執行刪除的PHP連結，第三格則是刪除資料的流水號欄位名稱。
4. 將<{$delete_cate_sn_func}>套至樣板檔中，其內容會是一個刪除的js函數
5. 在刪除連結語法中，改為

   <a href="javascript:delete_cate_sn_func('<{$data.cate_sn}>');" class="btn btn-xs btn-danger">刪除</a>