iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 56
1
Modern Web

30天學習30套前端技術(2018年)系列 第 56

[十分鐘學習] Tabulator - 表格內容強化工具

example1

相當容易操作的表格內容產生器,只需要花短短的時間,就可以透過把陣列或JSON格式的資料,產生成HTML介面的表格。並支援響應式網頁,以及可以運用其他套件做成物件產生資料圖表

GitHub Star: 500
Javascripting Overall: 41%
瀏覽器: ChromeFirefoxIE9+
RWD: 支援
License: MIT


《安裝》

  • CDN

    <!-- jQuery v1.9.1 -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <!-- jQuery UI v1.9.1 -->
    <link href="https://code.jquery.com/ui/1.9.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
    <script src="https://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>
    <!-- jQuery Sparklines v2.1.2 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.min.js"></script>
    <!-- Tabulator v3.4.0 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.4.0/css/tabulator.min.css" rel="stylesheet" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.4.0/js/tabulator.min.js"></script>
    
  • npm

    $ npm install jquery.tabulator --save
    
  • Bower

    $ bower install tabulator --save
    

《範例》

  • 表格內容圖像化

    <div id="example"></div>
    <script>
    	var lineFormatter = function( cell, formatterParams )
    	{
    		setTimeout(function(){
    			// 自訂圖表欄位模式,透過 jQuery Sparklines 產生圖表
    			cell.getElement().sparkline(cell.getValue(), {width:"100%", type:"line", disableTooltips:true});
    		}, 10);
    	};
    	$( "#example" ).tabulator({
    		// 參數設定[註1]
    		height: "auto", // 表格高度
    		layout: "fitColumns", // 表格風格
    		tooltips: true, // 顯示欄位提示訊息
    		addRowPos: "top", // 新增欄位位置
    		history: true, // 歷史紀錄
    		pagination: "local", // 顯示分頁
    		paginationSize: 7, // 分頁數量
    		resizableRows: true, // 可縮放欄位
    		columns:[
    			//資料格式設定
    			{ 	title: "Name", // 標題名稱
    				field: "name", // 欄位名稱
    				width: 150 // 欄位寬度
    			},
    			{ 
    				title: "Age",
    				field: "age",
    				align: "left",// 靠齊方向
    				formatter: "progress" // 欄位模式(列表[註2])
    			},
    			{ 
    				title: "Activity",
    				field: "activity",
    				width: 160, 
    				formatter: lineFormatter,
    				headerSort: false
    			},
    			{ 
    				title: "Rating",
    				field: "rating",
    				formatter: "star", 
    				align: "center", 
    				width: 100,
    				editor: true // 可編輯
    			}
    		],
    		rowClick:function( e, row )
    		{
    			// 當欄位被點選時,則執行此函式
    			alert( "ID: " + row.getData().id + "" );
    		}
    	});
    	var tabledata = [
    		// 表格內容
    		{id:1, name:"Tom", age:"25", activity: [ 3,4,2 ], rating: 5 },
    		{id:2, name:"Mike", age:"30", activity: [ 3,1,2 ], rating: 4 },
    		{id:3, name:"Jack", age:"20", activity: [ 3,2,1 ], rating: 3 },
    		{id:4, name:"Bob", age:"15", activity: [ 1,2,3 ], rating: 2 }
    	];
    
    	$( "#example" ).tabulator( "setData", tabledata );
    

    [註1]

    參數 描述
    height 表格高度
    layout 表格風格
    tooltips 顯示欄位提示訊息
    addRowPos 新增欄位位置
    history 歷史紀錄
    pagination 顯示分頁
    paginationSize 分頁數量
    pagination 顯示分頁
    resizableRows 可縮放欄位
    columns.title 標題名稱
    columns.field 欄位名稱
    columns.title 欄位寬度
    columns.align 靠齊方向
    columns.formatter 欄位模式(列表[註2])
    columns.editor 可編輯
    rowClick( event, 【欄位】) 當欄位被點選時,則執行此函式

    [註2]

    參數 描述
    plaintext 本文
    textarea 多行
    html HTML
    money 金錢(範例: 1000 => 1,000)
    image 圖片
    link 超連結
    tick true1會變成綠色V,否則空格
    tickCross true1會變綠色V,否則紅色X
    color 背景顏色
    star 星星
    progress 進度條

《延伸》

  1. Tabulator
  2. olifolkerd/tabulator: Interactive Tables Plugin for jQuery

上一篇
[十分鐘學習] Shave - 截斷文字
下一篇
2018鐵人賽索引和心得(圖多慎入)
系列文
30天學習30套前端技術(2018年)61

尚未有邦友留言

立即登入留言