Tabulator
olifolkerd.github.io
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>
その他のデータ指定方法
$("#example-table").tabulator("setData", "http://www.exampleurl.com/data");
HTML
$("#example-table").tabulator({});
参考
HTMLのテーブルをJSONで動的に更新できる「Tabulator」がスゴい！ - WPJ
