ブラウザ上で、グリッドを表示させるためのライブラリは有償、無償を含めて各種あります。もちろん有償のライブラリの方が高機能なグリッドがたくさんありますが、ここでは、MITライセンスで使うことができるライブラリとして、「Grid.js」についてシンプルな使い方をメモしておきます。
Grid.jsの公式サイト https://gridjs.io/
ドキュメント https://gridjs.io/docs
以下は、とりあえずデータを表示させる例です。
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Grid.jsの利用</title>
<!-- grid.js -->
<link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css"
rel="stylesheet">
<script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
<script type="text/javascript" src="index01.js"></script>
</head>
<body>
<div id="gridTag"></div>
</body>
</html>
index01.js
window.onload = (e) => {
new gridjs.Grid({
//項目名
columns: ["文字列","数値"],
//データ
data: [["高級車",5000000],
["住宅",30000000],
["自転車",30000]]
}).render(document.getElementById("gridTag"));
}
さらに様々な設定ができます。以下、設定について、いくつかの例です。
index01.js
window.onload = (e) => {
new gridjs.Grid({
//項目名
columns: ["文字列","数値"],
//データ
data: [["高級車",5000000],
["住宅",30000000],
["自転車",30000]],
//ソート設定
sort:true,
//表示幅
width: "300px",
//独自のスタイルシートの記述
style:{th:{"color":"navy"},
td:{"font-size":"10pt"}}
}).render(document.getElementById("gridTag"));
}
データは配列を渡すことで、グリッドに表示させることができます。
index01.js
window.onload = (e) => {
let items = ["名前","出身地","誕生年（西暦）"]
let data = [["信長","名古屋",1534],
["秀吉","名古屋",1537],
["家康","岡崎",1542]];
let gr = toGrid(items,data);
function toGrid(i,d){
let ret;
ret = new gridjs.Grid({
columns: i,
data: d,
}).render(document.getElementById("gridTag"));
return ret;
}
}
JSONデータも簡単に表示させられます。キーを自動的に項目名として拾ってくれます。
index01.js
window.onload = (e) => {
let data = [{"名前":"信長","出身地":"名古屋","誕生年（西暦）":1534},
{"名前":"秀吉","出身地":"名古屋","誕生年（西暦）":1537},
{"名前":"家康","出身地":"岡崎","誕生年（西暦）":1542}]
let gr = toGrid(data);
function toGrid(d){
let ret;
ret = new gridjs.Grid({
data: d,
}).render(document.getElementById("gridTag"));
return ret;
}
}
セルの値を取得することもできます。以下の例では、セルの値を取得して合計させています。
index01.js
window.onload = (e) => {
let data = [[100,200],[1,999]]
let gr = toGrid(data);
function toGrid(d){
let ret;
ret = new gridjs.Grid({
columns:[{name:"データA"},
{name:"データB"},
{name:"合計",
formatter:(_,row) => `${row.cells[0].data + row.cells[1].data}`,
}],
data: d,
}).render(document.getElementById("gridTag"));
return ret;
}
}
グリッドのセルにhtmlを埋め込むことができます。
index01.js
window.onload = (e) => {
let data = [["データ1","編集データ1",true],["データ2","編集データ2",false]]
let gr = toGrid(data);
function toGrid(d){
let ret;
let chekboxON = '<input type="checkbox" checked>'
let chekboxOFF = '<input type="checkbox">'
ret = new gridjs.Grid({
columns:[{name:"項目A",
formatter:(cell) => gridjs.html(`<b>${cell}</b>`),
},
{name:"項目B",
formatter:(cell) => gridjs.html(`<input value=${cell} size="10">`),
},
{name:"項目C",
formatter:(cell) => (`${cell}`=="true" ?
gridjs.html(chekboxON) : gridjs.html(chekboxOFF)),
}],
data: d,
}).render(document.getElementById("gridTag"));
return ret;
}
}
クリックイベントでデータを取得して、コンソールに出力させる例です。
index01.js
window.onload = (e) => {
let items = ["名前","出身地","誕生年（西暦）"]
let data = [["信長","名古屋",1534],
["秀吉","名古屋",1537],
["家康","岡崎",1542]];
let gr = toGrid(items,data);
gr.on("cellClick",(...args) =>{console.log(args)});
function toGrid(i,d){
let ret;
ret = new gridjs.Grid({
columns: i,
data: d,
}).render(document.getElementById("gridTag"));
return ret;
}
}
データの更新の例。3秒後にデータの内容が更新されます。更新はupdateConfigして、forceRender()呼出しが必要のようです。
index01.js
window.onload = (e) => {
let items = ["名前","出身地","誕生年（西暦）"]
let data = [["信長","名古屋",1534],
["秀吉","名古屋",1537],
["家康","岡崎",1542]];
let gr = toGrid(items,data);
setTimeout(() => {
data = [["のぶさん","名古屋",1534],
["ひでさん","名古屋",1537],
["いえさん","岡崎",1542]];
gr.updateConfig({
data : data
}).forceRender();
},3000)
function toGrid(i,d){
let ret;
ret = new gridjs.Grid({
columns: i,
data: d,
}).render(document.getElementById("gridTag"));
return ret;
}
}