2/08/2018

輕鬆做出美觀的自適應 RWD 表格(Table)﹍jQuery 輕量外掛

輕鬆做出美觀的自適應 RWD 表格(Table)﹍jQuery 輕量外掛

A+
jquery-responsive-table.jpg-輕鬆做出美觀的自適應 RWD 表格(Table)﹍jQuery 輕量外掛最近的案子處理行動版的表格效果時,發現以前的「Blogger 插入表格最佳流程 + 自適應寬度」,這個方式若用在商業網站,將沒有任何質感可言,甚至可以用簡陋來形容。

於是找了一下自適應 RWD 表格有沒有比較美觀,而且又簡便的處理方式。有發現幾個功能強大的外掛,但操作稍嫌複雜。

本篇要介紹的方案,比較能夠無腦套用,且現成的樣式、配色就很美觀,不用另外修改或研究 CSS 語法。





一、RWD 表格的原理


A. 各種方案

自適應表格可以有幾種處理方式:

  1. 隱藏部分內容
  2. 讓表格出現水平捲軸
  3. 將橫向標題欄位改為直向,重新排版

這個網頁「Responsive Table」很詳細地整理了以上幾種解決方案,同時頁面上也可直接看到各種方案的即時展示效果,請切換頁簽即可。

jquery-responsive-table-1.png-輕鬆做出美觀的自適應 RWD 表格(Table)﹍jQuery 輕量外掛


B. 優劣比較

  1. 隱藏部分內容:可根據不同寬度顯示不同內容,但製作、維護都不方便。
  2. 使用水平捲軸:最簡單的方式,但網站想要有質感的話,無法考慮這個方案。
  3. 橫向改直向重新排版:不必更動原表格內容,雖然表格拉得比較長,但版面美觀,製作及維護都很方便。

因此本篇會介紹第 3 種處理方式。



二、jQuery RWD 表格外掛


1. 各種外掛

這篇「Free jQuery responsive table Plugins」介紹了許多免費的 jQuery 自適應表格外掛,整理的非常好,每個外掛都分別提供了 Demo 展示頁面及下載連結。

jquery-responsive-table-2.jpg-輕鬆做出美觀的自適應 RWD 表格(Table)﹍jQuery 輕量外掛


上圖的外掛功能非常強大,可以處理各種不同情況的需求,只要懂 js 就能發揮外掛的威力。

如果是一般制式的表格,求版面美觀、容易處理就好,不一定要安裝功能太多的外掛,光是看說明書就很頭痛。


2. 簡易外掛 Basic Table

本篇要介紹的 jQuery 超輕量外掛 Basic Table,檔案很小,其實不必找外連空間,js/css 直接塞範本就好:




三、安裝外掛 Basic Table


1. 安裝外掛

在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

以 Blogger 為例,安裝到範本的流程為,後台「主題」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 </head> 這個字串,找到後在此字串的前一行,插入以下程式碼:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<style>
/*jQuery Basic Table, Author: Jerry Low*/
table{background:white;border-collapse:collapse;margin:1.25em 0 0;width:100%}
table tr,table th,table td{border:none;border-bottom:1px solid #e4ebeb;font-family:'Lato',sans-serif;font-size:.875rem}
table th,table td{padding:10px 12px;text-align:left}
table th{background:#56a2cf;color:#ffffff;text-transform:uppercase}
table tr td{background:#eaf3f5;color:#999999}
table tr:nth-of-type(2n+2) td{background:#ffffff}
table.bt tfoot th,table.bt tfoot td,table.bt tbody td{font-size:.8125rem;padding:0}
table.bt tfoot th:before,table.bt tfoot td:before,table.bt tbody td:before{background:#56a2cf;color:white;margin-right:10px;padding:2px 10px}
table.bt tfoot th .bt-content,table.bt tfoot td .bt-content,table.bt tbody td .bt-content{display:inline-block;padding:2px 5px}
table.bt tfoot th:first-of-type:before,table.bt tfoot th:first-of-type .bt-content,table.bt tfoot td:first-of-type:before,table.bt tfoot td:first-of-type .bt-content,table.bt tbody td:first-of-type:before,table.bt tbody td:first-of-type .bt-content{padding-top:10px}
table.bt tfoot th:last-of-type:before,table.bt tfoot th:last-of-type .bt-content,table.bt tfoot td:last-of-type:before,table.bt tfoot td:last-of-type .bt-content,table.bt tbody td:last-of-type:before,table.bt tbody td:last-of-type .bt-content{padding-bottom:10px}
table.bt thead,table.bt tbody th{display:none}
table.bt tfoot th,table.bt tfoot td,table.bt tbody td{border:none;display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;vertical-align:top;float:left\9;width:100%\9}
table.bt tfoot th::before,table.bt tfoot td::before,table.bt tbody td::before{content:attr(data-th) ":";display:inline-block;-webkit-flex-shrink:0;-ms-flex-shrink:0;flex-shrink:0;font-weight:bold;width:6.5em}
table.bt tfoot th.bt-hide,table.bt tfoot td.bt-hide,table.bt tbody td.bt-hide{display:none}
table.bt tfoot th .bt-content,table.bt tfoot td .bt-content,table.bt tbody td .bt-content{vertical-align:top}
.bt-wrapper.active{max-height:310px;overflow:auto;-webkit-overflow-scrolling:touch}
</style>
<script>
//<![CDATA[
(function($){$.fn.basictable=function(options){var setup=function(table,data){var headings=[];if(data.tableWrap){table.wrap('<div class="bt-wrapper"></div>')}var format="";if(table.find("thead tr th").length){format="thead th"}else if(table.find("tbody tr th").length){format="tbody tr th"}else if(table.find("th").length){format="tr:first th"}else{format="tr:first td"}$.each(table.find(format),function(){var $heading=$(this);var colspan=parseInt($heading.attr("colspan"),10)||1;var row=$heading.closest("tr").index();if(!headings[row]){headings[row]=[]}for(var i=0;i<colspan;i++){headings[row].push($heading)}});$.each(table.find("tbody tr"),function(){setupRow($(this),headings,data)});$.each(table.find("tfoot tr"),function(){setupRow($(this),headings,data)})};var setupRow=function($row,headings,data){$row.children().each(function(){var $cell=$(this);if(($cell.html()===""||$cell.html()==="&nbsp;")&&!data.showEmptyCells){$cell.addClass("bt-hide")}else{var cellIndex=$cell.index();var headingText="";for(var j=0;j<headings.length;j++){if(j!=0){headingText+=": "}var $heading=headings[j][cellIndex];headingText+=$heading.text()}$cell.attr("data-th",headingText);if(data.contentWrap&&!$cell.children().hasClass("bt-content")){$cell.wrapInner('<span class="bt-content" />')}}})};var unwrap=function(table){$.each(table.find("td"),function(){var $cell=$(this);var content=$cell.children(".bt-content").html();$cell.html(content)})};var check=function(table,data){if(!data.forceResponsive){if(table.removeClass("bt").outerWidth()>table.parent().width()){start(table,data)}else{end(table,data)}}else{if(data.breakpoint!==null&&$(window).width()<=data.breakpoint||data.containerBreakpoint!==null&&table.parent().width()<=data.containerBreakpoint){start(table,data)}else{end(table,data)}}};var start=function(table,data){table.addClass("bt");if(data.tableWrap){table.parent(".bt-wrapper").addClass("active")}};var end=function(table,data){table.removeClass("bt");if(data.tableWrap){table.parent(".bt-wrapper").removeClass("active")}};var destroy=function(table,data){table.find("td").removeAttr("data-th");if(data.tableWrap){table.unwrap()}if(data.contentWrap){unwrap(table)}table.removeData("basictable")};var resize=function(table){if(table.data("basictable")){check(table,table.data("basictable"))}};this.each(function(){var table=$(this);if(table.length===0||table.data("basictable")){if(table.data("basictable")){if(options=="destroy"){destroy(table,table.data("basictable"))}else if(options==="start"){start(table,table.data("basictable"))}else if(options==="stop"){end(table,table.data("basictable"))}else{check(table,table.data("basictable"))}}return false}var settings=$.extend({},$.fn.basictable.defaults,options);var vars={breakpoint:settings.breakpoint,containerBreakpoint:settings.containerBreakpoint,contentWrap:settings.contentWrap,forceResponsive:settings.forceResponsive,noResize:settings.noResize,tableWrap:settings.tableWrap,showEmptyCells:settings.showEmptyCells};if(vars.breakpoint===null&&vars.containerBreakpoint===null){vars.breakpoint=568}table.data("basictable",vars);setup(table,table.data("basictable"));if(!vars.noResize){check(table,table.data("basictable"));$(window).bind("resize.basictable",function(){resize(table)})}})};$.fn.basictable.defaults={breakpoint:null,containerBreakpoint:null,contentWrap:true,forceResponsive:true,noResize:false,tableWrap:false,showEmptyCells:false}})(jQuery);
//]]>
</script>

第 1 行綠字可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jQuery,如果已經安裝過請刪除此行,以免重複安裝。


2. 表格 HTML 範例

以下是一個簡單表格 Table 的 HTML 範例:

<table id="RWD">
<thead>
<tr>
<th>姓名</th>
<th>身份證</th>
<th>性別</th>
<th>生日</th>
<th>行動電話</th>
<th>通訊地址</th>
</tr>
</thead>
<tbody>
<tr>
<td>Wayne</td>
<td>A123456789</td>
<td>男</td>
<td>2000-01-01</td>
<td>0912345678</td>
<td>台北市信義路五段5號</td>
</tr>
<tr>
<td>Mary</td>
<td>B987654321</td>
<td>女</td>
<td>2000-10-10</td>
<td>0987654321</td>
<td>台北市信義路五段7號</td>
</tr>
</tbody>
</table>

Table 標籤需要使用 ID 參數,紅色 ID 參數字串可自訂,請記下自己使用的字串,之後會用到。


3. 執行外掛

執行外掛的方式非常簡單,在範本中搜尋</body> 這個字串,找到後在此字串的前一行,插入以下程式碼:

<script>
$("#RWD").basictable();
</script>

紅色字串請改為自己的參數即可。

需要看手機的 RWD 效果,請前往展示頁面:




四、補充修改說明


基本上本篇已經幫讀者把該安裝的 code 都整理好了,可直接無腦套用。不過如果要修改的話,有些地方官網的說明滿簡陋的,畢竟只是個簡單的小外掛,可參考以下我摸索過的補充。

1. 設定斷點

程式預設的寬度斷點值為 568,代表螢幕寬度為 568px 以下時,會使用 RWD 表格效果。

如果想要自訂 RWD 斷點,可使用以下參數:

$("#RWD").basictable({breakpoint: 768});
代表寬度 768px 以下 Table 會變成 RWD 效果。


2. 動態產生表格內容

如果表格的內容並非一開始就存在,曾經使用 js 動態產生的話,那麼 RWD 表格內容會異常,因為動態產生的內容不會被程式處理到。

因此官網提供了參數 start, stop, destroy 供不同用途使用。

當 Tabel 中有動態產生的內容後,我的處理方式如下:

// 先取消 RWD 表格
$("#RWD").basictable("destroy");
// 再重新產生 RWD 表格
$("#RWD").basictable({breakpoint: xxx});


3. 不同 CSS 用途

官網 DEMO 畫面提供了幾種不同用途的效果,但並沒有說明這些狀況下的 CSS 如何使用,可參考以下說明。

下載完官方提供的檔案、解壓縮後:

  • 根目錄的 basictable.css 內容一定要使用,請複製出來
  • demo 資料夾裡面的 css 資料夾,裡面的 style.css,註解標示了七個區塊,就是官網 DEMO 畫面的七種效果
  • 想要使用哪種效果,就複製那個區塊的 CSS 出來使用即可


更多 RWD 相關技巧:
如這篇文章對你有幫助,歡迎「分享」或給我個讚:

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP