Tabulatorを使ってみた

16074 ワード
JavaScript jQuery BCL ラジオ Tabulator JavaScript テキストリンク

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/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://unpkg.com/[email protected]/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キーを押してクリックします。

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

<!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/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://unpkg.com/[email protected]/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>

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

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

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