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에 두어 브라우저에서 직접 볼 수 있도록 했습니다.
Reference
이 문제에 관하여(Tabulator를 사용해 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yamori813/items/d0c6971ca5154d8fc1bf텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
