:::

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>

 


:::

搜尋

QR Code 區塊

https%3A%2F%2Fwww.tad0616.net%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D39%26tbdsn%3D1205

書籍目錄

展開 | 闔起

線上使用者

58人線上 (18人在瀏覽線上書籍)

會員: 1

訪客: 57

staff3402_goo,

更多…