這個工具是 Table view, FooTable:
https://fooplugins.github.io/FooTable/
很適合快速地將資料利用 table 的方式呈現出來, 這個工具的特點是同時可以分頁、搜尋、排序與編輯, 尤其在 mobile view (responsive) 時, 可以摺疊內容, 不用橫向捲動, 十分方便.
這裡將利用財金公司的國內銀行分行代碼表來進行示範, 原始資料在這裡:
https://www.fisc.com.tw/TC/Service?CAID=51254999-5d15-4ddf-8e54-4b2cdb2a8399
其中的”下載完整對照表”, “台幣匯款”, 可以下載完整的國內銀行總分支機構代碼(7碼)與名稱, 連結如下:
https://www.fisc.com.tw/tc/download/twd.txt
內容如上, 純文字檔, 不過請注意右下角的 Big5 編碼, 若要實作為 web 程式碼, 需要轉換為 UTF-8 (下面的程式碼使用 mb_convert_encoding 進行轉換).
接下來利用 FooTable 進行實作囉, 基礎程式碼如下:
$(document).ready(function() { $('.table').footable({ "paging": { "enabled": true, }, "filtering": { "enabled": true }, "sorting": { "enabled": true }, "columns": [{ "name": "id", "title": "id" }, { "name": "branch", "title": "branch", "breakpoints": "xs" }, { "name": "abbr", "title": "abbr" } ], "rows": $.get("twd.php"), }); });
簡單說明, paging, filtering, sorting 要設為 true, 而 columns 有三欄, 所以分別給定對應的欄位名(name)與欄位顯示(title), 其中 branch 有多加了 breakpoints: xs 代表著在 xs 時要摺疊, 也就是小畫面時, 會將此欄位收納起來. 而 rows 則為實際的資料, 這裡簡單使用一支 php 程式進行, 程式碼如下:
header('Content-Type: application/json; charset=utf-8'); $datas = array(); $text = file_get_contents("https://www.fisc.com.tw/tc/download/twd.txt"); $text = mb_convert_encoding($text, "UTF-8", "BIG5"); $lines = explode(PHP_EOL, $text); $linecount = count($lines); for($i=0;$i<$linecount;$i++){ $line = $lines[$i]; array_push($datas, array( "id" => trim(mb_substr($line, 0, 7)), "branch" => trim(mb_substr($line, 8, 20)), "abbr" => trim(mb_substr($line, 28, 5)) )); } echo json_encode($datas);
簡單說明, 首先要輸出 json 的結果, 所以使用了 header 設定 Content-Type: application/json, 取得內容使用 file_get_contents([url])進行, 不過實際程式碼有利用其他方式進行快取至本地, 來降低存取原始資料的重覆與降載, 再來利用 mb_convert_encoding 將原始的 BIG5 文字編碼轉為 UTF-8, 接下來是逐筆回填至 hash array, 最後利用 json_encode 將對應的 hash array 輸出即可:
這樣即可利用 FooTable 進行展示了, 範示在這裡:
https://sample.diary.tw/bankbranches/
於電腦寬版時, 會全部呈現, 在手機窄版時, 其中的 branch 欄位會因為之前的 breakpoints: xs 被摺疊起來:
利用旁邊的 + 號可以展開, 十分方便快速的一個資料展示的 table view 功能 – FooTable.
PS: 另外還有一組資料”「總分支機構位置」查詢一覽”是直接 UTF-8編碼與提供CSV格式的資料, 可以參考:
https://www.fisc.com.tw/TC/OpenDatas?Caid=ed820f3a-32d3-4a5b-8dcb-283dce06aae8&CaStyleId=6
「總分支機構位置」查詢一覽: https://www.fisc.com.tw/TC/OPENDATA/R2_Location.csv
大家也可以實作看看.
範例如下:
https://sample.diary.tw/bankbranches/location.php