LoginSignup
1
2

More than 3 years have passed since last update.

Tabulatorを使ってみた

Last updated at Posted at 2020-10-26

AM送信所マップを作ってみたのjsonをTabulatorで表にしてみました。

ローカルファイルからgistのrawデータを読むとCORSのエラーが出るのでTabulatorのajaxは使わず、一旦jqueuryでデータを取得してから、Tabulatorに渡すようにしてみました。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AM DX LIST</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <link href="https://unpkg.com/tabulator-tables@4.8.3/dist/css/tabulator.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.8.3/dist/js/tabulator.min.js"></script>
    <script>
        function init() {
            $.getJSON("https://gist.githubusercontent.com/yamori813/16065bbff4473e8ec3430570fcf7da7f/raw/radio.json", null, function(data,status){
    //取得成功したら実行する処理
            var tableData = data.radio;
            var table = new Tabulator("#example-table", {
            data: tableData,
            columns: [
            {
                title: "略称",
                field: "name"
            },
            {
                title: "会社",
                field: "corporation"
            },
            {
                title: "コールサイン",
                field: "callsign"
            },
            {
                title: "周波数",
                field: "frequency"
            },
            {
                title: "出力",
                field: "power"
            },
        ]
    });
    });
};

    </script>
</head>
<body onload="init()">
<div id="example-table"></div>
</body>
</html>

周波数でソートできるのは便利です。複数のフィールドでソートしたい場合はctrlかshiftキーを押してクリックします。

Screenshot_2020-10-27 AM DX LIST(1).png

ちょっと見やすくしてみた。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AM DX LIST</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <link href="https://unpkg.com/tabulator-tables@4.8.3/dist/css/tabulator.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.8.3/dist/js/tabulator.min.js"></script>
    <script>
function customFilter(data, filterParams){
return 1; 
}
        function init() {
            var kw = function(cell) {
                return cell.getValue() / 1000;
            }
            $.getJSON("https://gist.githubusercontent.com/yamori813/16065bbff4473e8ec3430570fcf7da7f/raw/radio.json", null, function(data,status){
    //取得成功したら実行する処理
            var tableData = data.radio;
            var table = new Tabulator("#example-table", {
                rowClick:function(e, row){
                    var array = row.getData();
                    window.open("https://www.google.com/maps?t=k&q=" + array.latitude + "," + array.longitude);
                },
                data: tableData,
                columns: [
                {
                    title: "略称",
                    field: "name",
                    sorter:"string", headerSort:false
                },
                {
                    title: "会社",
                    field: "corporation",
                    sorter:"string", headerSort:false
                },
                {
                    title: "コールサイン",
                    field: "callsign",
                    sorter: function(a, b, aRow, bRow, column, dir, sorterParams){
                        var astr = a.charAt(3) + a.charAt(2);
                        var bstr = b.charAt(3) + b.charAt(2);
                        return astr > bstr;
                    }
                },
                {
                    title: "周波数(kHz)",
                    field: "frequency",
                    align: "right"
                },
                {
                    title: "出力(kW)",
                    field: "power",
                    formatter: kw,
                    align: "right"
                },
            ]
        });
    });
};

    </script>
</head>
<body onload="init()">
<div id="example-table"></div>
</body>
</html>

Screenshot_2020-10-27 AM DX LIST(3).png

コールサインのソートはちょっと凝ってみました。:)

クリックするとgoogle mapの航空写真が開きます。日本全国オンラインアンテナめぐりができます。

Screenshot_2020-10-28 35°14'42 7 N 136°11'17 0 E.png

HTMLもgistに置いてブラウザで直接見れるようにしました。

1
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2