Tabulator
GitHub - olifolkerd/tabulator: A table generation JQuery UI Plugin
概要
高機能なテーブルが作成できると聞いて、試してみたくなった。
REST-fullなwebページ作成の補助につながる気がしたので、気になった。
あとは、Excelを殺してくれそうな気がしたので。。。
試作
前準備
とりあえず、下記をインクルードしていれば、試せる。
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
テーブルの作成
<div id="example-table"></div>
指定した要素にテーブルを適用してみる。
当然、jqueryなので、id名指定以外にもクラス名指定もできる。
今回は、とりあえずid名指定で確認。
以下でテーブルを作成する。
$("#example-table").tabulator();
テーブルはできるけど、表示するものが無いので、次で表示設定をする。
列定義
$("#example-table").tabulator({
columns:[
{title:"Name", field:"name", sortable:true, width:200},
{title:"Progress", field:"progress", sortable:true, sorter:"number"},
{title:"Gender", field:"gender", sortable:true},
{title:"Favourite Color", field:"col", sortable:false},
{title:"Date Of Birth", field:"dob"},
{title:"Cheese Preference", field:"cheese"},
],
});
列の定義内容
- title
必須：この列のヘッダーに表示されるタイトル。 - field
必須：（アイコン/ボタン列では不要）データ配列内のこの列のキー。 - align
列のテキストの配置。設定内容は、（left | center | right） - width
列の幅を設定。ピクセル単位、テーブル全体の幅に対するパーセンテージの設定も可能。未設定だと、システムが最適と判断した幅になる。 - minWidth
列の最小幅を設定。 - sortable
列のデータを並べ替可否の設定 - sorter
列のソート方法指定。 - formatter
データのフォーマット指定。 - onClick
列のセルをクリックしたときの処理内容。 - editable
編集可否の設定。Bool値のみ設定可。デフォルト：false - editor
データを編集するときに使用するエディタの設定 - visible
可視設定。Bool値のみ設定可。デフォルト：true - cssClass
列のヘッダーとセルに適用するCSSクラスを設定。 - tooltip
列の各セルホバー時のツールチップを設定する。 - tooltipHeader
列見出しホバー時のツールチップを設定する。 - editableTitle
ヘッダータイトルの編集可否設定。 - headerFilter
ヘッダ内の要素から列をフィルタリング。 - mutator
テーブルに解析されるときに列の値を操作する関数。
ぶっちゃけ、使い方がよく分からん。 - mutateType
データ解析、セル編集、またはその両方で突然変異を発生させるかどうかを定義。
ぶっちゃけ、使い方がよく分からん。 - accessor
getData関数を使用する前の処理内容を記載する。
テーブルへのデータの読み込み
今回はとりあえず配列で試す。
var sampleData = [
{id:1, name:"Oli Bob", progress:12, gender:"male", rating:1, col:"red", dob:"", car:1, lucky_no:5, cheese:"Cheader"},
{id:2, name:"Mary May", progress:1, gender:"female", rating:2, col:"blue", dob:"14/05/1982", car:true, lucky_no:10, cheese:"Gouda"},
{id:3, name:"Christine Lobowski", progress:42, gender:"female", rating:0, col:"green", dob:"22/05/1982", car:"true", lucky_no:12, cheese:"Manchego"},
{id:4, name:"Brendon Philips", progress:100, gender:"male", rating:1, col:"orange", dob:"01/08/1980", lucky_no:18, cheese:"Brie"},
{id:5, name:"Margret Marmajuke", progress:16, gender:"female", rating:5, col:"yellow", dob:"31/01/1999", lucky_no:33, cheese:"Cheader"},
];
データを割り当てる。
割り当てるには、setData()を使う。
メソッドを呼ぶんじゃなくて、tabulatorの中で処理するので、注意。
$("#example-table").tabulator("setData", sampleData);
HTMLファイルを開くと、指定したJavaScript配列のデータが表示される。
サンプルHTML
<html> <head> <title>tabulator-test</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="tabulator-master/tabulator.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> <script type="text/javascript" src="tabulator-master/tabulator.js"></script> </head> <body> <div id="example-table"></div> <script type="text/javascript"> $("#example-table").tabulator({ columns:[ {title:"Name", field:"name", sortable:true, width:200}, {title:"Progress", field:"progress", sortable:true, sorter:"number"}, {title:"Gender", field:"gender", sortable:true}, {title:"Favourite Color", field:"col", sortable:false}, {title:"Date Of Birth", field:"dob"}, {title:"Cheese Preference", field:"cheese"}, ], }); var sampleData = [ {id:1, name:"Oli Bob", progress:12, gender:"male", rating:1, col:"red", dob:"", car:1, lucky_no:5, cheese:"Cheader"}, {id:2, name:"Mary May", progress:1, gender:"female", rating:2, col:"blue", dob:"14/05/1982", car:true, lucky_no:10, cheese:"Gouda"}, {id:3, name:"Christine Lobowski", progress:42, gender:"female", rating:0, col:"green", dob:"22/05/1982", car:"true", lucky_no:12, cheese:"Manchego"}, {id:4, name:"Brendon Philips", progress:100, gender:"male", rating:1, col:"orange", dob:"01/08/1980", lucky_no:18, cheese:"Brie"}, {id:5, name:"Margret Marmajuke", progress:16, gender:"female", rating:5, col:"yellow", dob:"31/01/1999", lucky_no:33, cheese:"Cheader"}, ]; $("#example-table").tabulator("setData", sampleData); </script> </body> </html>
その他のデータ指定方法
Ajax
$("#example-table").tabulator("setData", "http://www.exampleurl.com/data");
HTML
$("#example-table").tabulator({});
