jsonファイルでテーブル作成 Tabulatorが高性能で便利過ぎる
サーバサイド側から、jsonファイルを渡してあげたところで、またテーブルを作成する処理がなかなか面倒ですよね。
そんな時にTabulatorがかなり便利です。
Tabulatorを使うと、ソート機能やデータの変更も容易に可能になります。
また、ajaxも対応しているので、動的にテーブルをの変更なども可能になります。
ダウンロードは公式サイトから、行って下さい
Tabulatorを使う際には、jQueryが必要になるので、jQueryもダウンロードして下さい。
現在、3.5.0にバージョンアップしてありますが、仕様の変更を確認していない為、3.4.1を使用しています。
また、重くなってしまうので、min版をダウンロードすることをおすすめします。
javaScript ：tabulator.js
$(function () {
//jsonファイル
var json = [
{
gender: "男性",
rating: 20,
col: "yellow"
},
{
gender: "男性",
rating: 100,
col: "blue"
},
{
name: "しずかちゃん",
gender: "女性",
rating: 30,
col: "pink"
},
{
gender: "男性",
rating: 60,
col: "orange"
},
{
gender: "男性",
rating: 40,
col: "green"
}
];
//テーブルの作成 var table = new Tabulator("#example-table", {
layout: "fitColumns",
tooltips: true,
addRowPos: "top",
columns: [
{
title: "名前",
field: "name"
},
{
title: "性別",
field: "gender"
},
{
title: "能力",
field: "rating",
editor:true,
formatter:"progress"
},
{
title: "イメージカラー",
field: "col",
formatter:"color"
},
]
});
});
HTML：sample.html
<!DOCTYPE html>
<html>
<head>
<title>tabulator Sample</title>
<!-- jQuery読み込み -->
<!-- Tabulatorの読み込み -->
<!-- 検索結果のテーブル作成-->
</head>
<body>
<div id="example-table">
</div>
</body>
</html>
結果
こんな感じに出来ます。
ソートはも出来、カラー・プログレスバーなども表示し、editor:trueで編集も可能になります。
比較的、簡単に実装出来るので、おすすめです。
また、Tabulatorの公式サイトもサンプルをかなり置いてくれているので、かなり良心的で分かりやすいです。
サーバサイドでの処理ですが、テーブルの行(row)単位でデータを取れるので、変えたいところの行のデータを、サーバサイドに送って、データベースのUPDATEも簡単にできます。
javaScriptはかなりのライブラリーがあるので、探すのは大変ですが、その反面、面白さもありますね。
