JavaScriptのグリッドライブラリのなかでも、よくできているGrid.jsですが、どうもセルデータの編集機能がない様です。セルデータを編集できるようにしてみたので、公開しておきます。
仕組みとしては、テキストボックスをセルに表示させて、更新したデータでグリッドのセルデータも更新しています。ただ、Grid.jsのloadイベントは最新バージョンに対応していないようで、grid.config.store.subscribe()にて回避できました。
動作はこちらから確認できます。
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>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="main">
各行のデータを取得して出力します。テキストボックスにて編集したデータを取得することができます。
<div id="gridTag"></div>
<div id="output"></div>
</body>
</html>
style.css
.g_input{
font-size: 11pt;
border: 1px solid rgb(220, 220, 220);
color: rgb(0, 0, 0);
border-radius: 2pt 2pt 2pt 2pt;
}
.g_bt{
color: rgb(80,80,80);
}
index01.js
window.onload = (e)=>{
let data = [["データ1","編集データ1","データ取得"],["データ2","編集データ2","データ取得"]]
let gr = toGrid(data);
let g_input; //グリッド中のテキストボックス
let g_bt; //グリッド中のボタン
let output = document.getElementById("output");
// Grid.jsにはloadイベントが実装されているようですが、機能していません
// gr.on("load",() => {console.log("grid load")});
// そのための回避策 参考 https://qiita.com/watmot/items/4b1e56604430f43c5ba6
function tableStatesListener(state, prevState) {
if (prevState.status < state.status) {
if (prevState.status === 2 && state.status === 3) {
//グリッド中のテキストボックス
g_input = [...document.getElementsByName("g_input")];
g_input.forEach((elem,i) => {
elem.onchange = (e) => {
//テキストボックスに入力したデータで、グリッドのデータを更新する
gr.config.data[i][1] = g_input[i].value;
}
});
//グリッド内のボタン
g_bt = [...document.getElementsByName("g_bt")];
g_bt.forEach((elem,i)=>{
elem.onclick = (e) => {
//出力
output.innerText = gr.config.data[i].join(",")
}
});
}
}
}
function toGrid(d){
let ret;
ret = new gridjs.Grid({
columns:[{name:"項目A",
formatter:(cell) => gridjs.html(`<span>${cell}</span>`),
width:"100px",
},
{name:"項目B",
formatter:(cell) => gridjs.html(`<input value=${cell} size="16" name="g_input" class="g_input">`),
width:"150px",
},
{name:"項目C",
formatter:(cell) => {console.log();
return gridjs.html(`<button name="g_bt" class="g_bt">${cell}</button>`)},
}],
data: d,
width: "500px",
style:{td:{"padding":"5px","font-size":"11pt","color":"rgb(80,80,80)"}}
}).render(document.getElementById("gridTag"));
//更新時tableStatesListenerを呼出し
ret.config.store.subscribe(tableStatesListener);
return ret;
}
}