一、 用FooTable使表格隨螢幕大小自動調整欄位
- 表格很難自適應，最多就是格子放大縮小而已，因此，我們可以想辦法，把一些比較不那麼重要的欄位，再顯示區域不夠時，暫時先將之隱藏起來。
- 官網：https://github.com/fooplugins/FooTable
- 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);
}
- 表格先設個id，如id=" phone_table"，並且在表格標題列用<thead>包起來。
- 在表格標題<th>中，看哪些欄位要隱藏的，加上以下註記，xs(480) sm(768) md(992) lg(1200)分別代表個種不同螢幕尺寸，若有md，表示螢幕小於992就將該欄位隱藏之意。all則是不管螢幕一律隱藏（記住一個原則，註記越多，越早隱藏）
data-breakpoints="xs sm md lg"
- 若是bootstrap2請自行將xs改為x-small，sm改為small，md改為medium，lg改為lagre即可。
- 假如沒有標題列，請在第一列的<td>中加入data-title屬性，以做成標題。
- 表格排序只要在<table>中加入 data-sorting="true" 即可
- 可在<th>用data-type來指定欄位類型，預設為text，還可指定為number或date
- 內容過濾只要在<table>中加入 data-filtering="true" 即可
二、 拉動後自動儲存排序
- 此功能不限用在表格，用在div、ol、ul都可以。
- 這是利用jquery ui 的sortable功能來做的，故需用 get_jquery(true); 來載入jquery ui
- 在每筆可以被拉動資料放上拉動圖示（需引入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}>">
- 每筆資料設個id，其格式為「變數_編號」，下例會得到一個$_POST['cate_sn']陣列變數，包含所有的cate_sn編號。
<tr id="cate_sn_<{$data.cate_sn}>">
- 需要有個父元件（如 tbody）將所有需要排序的內容包起來，記得設一個id
<tbody id="sort">
- 在表格外找個適當的地方放一個資訊框，排序完會在該元件裡顯示通知
<div id="save_msg"></div>
- 加入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>
- 生出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警告視窗
- 官網：http://lipis.github.io/bootstrap-sweetalert/
- 這是一個提醒視窗的套件，相當美觀。請在欲顯示刪除功能的函數或程式加入以下語法
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);
- render()有三個參數，第一個參數是javascript刪除函數的名稱，第二個是執行刪除的PHP連結，第三格則是刪除資料的流水號欄位名稱。
- 將<{$delete_cate_sn_func}>套至樣板檔中，其內容會是一個刪除的js函數
- 在刪除連結語法中，改為
<a href="javascript:delete_cate_sn_func('<{$data.cate_sn}>');" class="btn btn-xs btn-danger">刪除</a>