- 投稿日：2022年03月14日 11時20分01秒
- 更新日：2022年03月23日 17時23分14秒
Tabulatorについて
デモ
説明・補足・注意事項
これは公式の「Frozen Columns」のjavascriptを使い、それに合ったデータを私が作り表示したものです。
詳しくはこちらのFrozen Columnsを参照ください。
詳細
ここではTabulatorを使うための環境構築、Tabulatorにあるプロパティや関数をざっくり紹介しています。
準備
必要ファイルをダウンロード
Tabulator公式ページから最新vをダウンロードします。
ダウンロードしたら解凍して、サーバの任意のところに配置してください。
当然ですが、使いたいページからhttpでアクセスできるところにおいてくださいね。
設定
Tabulatorを使いたいWebページのheadにTabulatorを読み込む記述をします。
具体的には以下のようになります。
<link href="tabulator-master/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="tabulator-master/dist/js/tabulator.min.js"></script>上記は表示するWebページと同じ階層に準備でダウンロードして解凍したものを置いた場合です。
ちなみにCDMだと以下のようになります。
<link href="https://unpkg.com/tabulator-tables@5.1/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.1/dist/js/tabulator.min.js"></script>開発
表示したい位置にdivタグを記述しておきます。
ここへのセレクタをTabulatorに渡す必要があるので、それを意識してid属性やclass属性を付けてください。
そしてそれ以降にTabulatorに関する記述をjavascriptで記述します。
下のはもぐもプログラミング様のものを一部転載しています。
<div id="example-table"></div>
<script type="text/javascript">
var tableData = [
{id:1, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
{id:2, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
]
var dataTable = new Tabulator("#example-table", {
data:tableData,
layout:"fitColumns",
columns:[
{title:"Name", field:"name"},
{title:"Age", field:"age"},
{title:"Gender", field:"gender"},
{title:"Height", field:"height"},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob"},
{title:"Cheese Preference", field:"cheese"},
],
})
</script>第一引数に表示位置タグのセレクタ、第二引数に表示方法や表示内容について配列で指定します。
どのような表示にするかレイアウトを複数用意してくれているので、こちらをみて自分に合いそうなのを探してください。
これだけでオシャレなテーブルが作成されます。
phpと絡めて使う場合
<?php // ここはテストデータを作っているところです。
class dataTemplate{
public $id = "";
public $name = "";
function __construct($_id, $_name){
$this->id = $_id;
$this->name = $_name;
}
}
$inputDatas = array();
$inputDatas[0] = new dataTemplate("1", "AAA");
$inputDatas[1] = new dataTemplate("2", "BBB");
$inputDatas[2] = new dataTemplate("3", "CCC");
?>
<div id="example-table"></div>
<script type="text/javascript">
var tableData = [];
</script>
<?php foreach($inputDatas as $inputData): ?>
<script type="text/javascript">
var actionElm = "";
actionElm = actionElm.concat('<form class="side-by-side clm2" action="http://localhost:8080/tabulator/delete/' + '<?php echo $inputData->id; ?>' + '" >');
actionElm = actionElm.concat('<button type="button" class="clmItem" onclick="location.href=\'http://localhost:8080/tabulator/link/' + '<?php echo $inputData->id; ?>' + '\'">リンクボタン</button>');
actionElm = actionElm.concat('<button type="submit" class="clmItem" >submitボタン</button>');
actionElm = actionElm.concat('</form>');
var tableData_row = {id:"<?php echo $inputData->id; ?>", name:"<?php echo $inputData->name; ?>", action:actionElm};
tableData.push(tableData_row);
</script>
<?php endforeach; ?>
<script type="text/javascript">
var dataTable = new Tabulator("#example-table", {
data:tableData,
layout:"fitColumns",
columns:[
{title:"Name", field:"name"},
{title:"Action", field:"action", formatter:"html"},
],
})
</script>これはphpで連想配列なデータを取得し、それをテーブルに表示したいという要望に応えるために作ったテストプログラムコードです。
phpからjavascriptへ配列を変化し、それをTabulatorに渡すことで実現しています。
本当は関数化したりする必要があると思いますが、今回は動けばいいという感じで作っています。
以下はTabulatorについてわかったことやプロパティと値など記載しています。
メモ書きのため全てを網羅しているわけでもなく、バージョン差も意識しているわけではないのでご注意ください。
プロパティ
data
表示したいデータをjson形式の配列で指定してください。
layout
Tabulatorでは表示方法を複数用意しており、layoutに指定するだけで表示方法を指定することが出来ます。
詳しくはこちらをどうぞ。
※わざとURLからバージョンを削除しています。どうもサーバ側が最新に飛ばしてくれるみたいです。
selectable
行選択の可否を設定できます。
addRowPos
新規行の追加について設定します。例ではbottomを指定したTabulatorにaddRow({})関数を実行することで行追加を実現しています。
formatter
列に対して表示データの形式を指定します。結構な種類があるので詳しくはこちらを参照ください。
| 値 | 説明 | formatterParamsの指定有無 | 備考 |
|---|---|---|---|
| plaintext | 既定値。 セルの値をテキストとして表示 | ||
| textarea | 改行がそのままのテキストを表示 | ||
| html | 値をHTMLとしてそのまま表示 | ||
| money | 数値を通貨表記にフォーマットして表示 フォーマットの指定が必要。 | 〇 | |
| image | srcを値として設定してimg要素を表示 フォーマットの指定が必要。 | 〇 | |
| link | 指定された値へのリンクを持つアンカーとしてデータをレンダリング フォーマットの指定が必要。 | 〇 | |
| datetime | 日時の表示を行う。 | 〇 | luxon.jsライブラリが必要 |
| datetimediff | 2つの日時の違いを表示 | 〇 | luxon.jsライブラリが必要 |
| tickCross | 値がTrueなら緑のチェック、それ以外は赤の十字 | 〇 | |
| color | セル背景色を指定 | ||
| star | 整数値に基づいてグラフィカルなスター評価を表示 | 〇 | |
| traffic | セルの数値に応じて色が変わる色付きの円を表示 | 〇 | |
| progress | 幅のパーセンテージとして0〜100の値を使用して、セルを左から右に塗りつぶすプログレスバーを表示 | 〇 | |
| lookup | formatterParamsプロパティに渡されたオブジェクトから表示する値を検索 | 〇 | |
| buttonTick | 各行にチェックアイコンを表示 | 〇 | |
| buttonCross | 各行に十字アイコンを表示 | 〇 | |
| rownum | 表示される各行の増分行番号を表示 | ||
| handle | 行ハンドルとして使用されるハンバーガーバーを表示 |
この他にもモジュールフォーマッタと呼ばれるものもあります。
詳しく知りたい方はこちらをどうぞ。
関数
addRow(object)
行を追加します。引数にdataと同じjson形式を指定すると新規データ行を追加できるようです。
deleteRow(int)
行を削除します。削除行番号を引数に指定する見たいです。
clearData()
テーブルの表示データを全て消します。
setData(object)
テーブルに表示データをセットします。追加ではなく、引数のデータセットに書き換えるという処理です。
指定方法はdataプロパティと同じです。
