読者です 読者をやめる 読者になる 読者になる

エンターテイメント!!

遊戯王好きのJavaエンジニアのブログ。バーニングソウルを会得する特訓中。

Tabulator概要

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>

その他のデータ指定方法

Ajax

$("#example-table").tabulator("setData", "http://www.exampleurl.com/data");

HTML

$("#example-table").tabulator({});

参考

HTMLのテーブルをJSONで動的に更新できる「Tabulator」がスゴい! - WPJ