Tad 教材網 - 線上書籍

:::

\[1042\] XOOPS模組開發進階
====================

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

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

1. 表格很難自適應，最多就是格子放大縮小而已，因此，我們可以想辦法，把一些比較不那麼重要的欄位，再顯示區域不夠時，暫時先將之隱藏起來。
2. 官網：<https://github.com/fooplugins/FooTable>
3. tadtools有兩種版本，FooTable.php是舊版，FooTable\_bootstrap.php是新版，並整合bootstrap。使用方法如下： ```
  <pre class="brush:php;">
  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則是不管螢幕一律隱藏（記住一個原則，註記越多，越早隱藏） ```
  <pre class="brush:xml;">
  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語系才能顯示） ```
  <pre class="brush:xml;">
  <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編號。 ```
  <pre class="brush:as3;">
  <tr id="cate_sn_<{$data.cate_sn}>">
  ```
5. 需要有個父元件（如 tbody）將所有需要排序的內容包起來，記得設一個id ```
  <pre class="brush:xml;">
  <tbody id="sort">
  ```
6. 在表格外找個適當的地方放一個資訊框，排序完會在該元件裡顯示通知 ```
  <pre class="brush:xml;">
  <div id="save_msg"></div>
  ```
7. 加入js語法，其中挑選器務必等於父元件的id值 ```
  <pre class="brush:xml;">
  <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以下，引入檔案位置請自行調整。 ```
  <pre class="brush:php;">
  <?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. 這是一個提醒視窗的套件，相當美觀。請在欲顯示刪除功能的函數或程式加入以下語法 ```
  <pre class="brush:php;">
  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. 在刪除連結語法中，改為 ```
  <pre class="brush:xml;">
  <a href="javascript:delete_cate_sn_func('<{$data.cate_sn}>');" class="btn btn-xs btn-danger">刪除</a>
  ```

:::