Grid.jsを使ったWebアプリ

📌

この例を実行する前に、EXAMPLEテーブルを作成してください。

CREATE TAG TABLE IF NOT EXISTS EXAMPLE  (
    NAME VARCHAR(20) PRIMARY KEY,
    TIME DATETIME BASETIME,
    VALUE DOUBLE SUMMARIZED
);

この例は、machbase-neoのデータをGrid.jsライブラリで表示する方法を示します。

18〜19行目：Grid.jsライブラリを組み込みます。
29〜30行目：結果のJSONから列とデータを割り当てます。
37行目：ユーザーが再読み込みしたときにデータを更新します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<html>
<head>
    <script>
        function submitData() {
            const value  = Number(document.getElementById("userInput").value)
            fetch("/db/write/EXAMPLE?timeformat=ms", {
                method: "POST",
                headers: { "Content-Type": "text/csv" },
                body: 'webapp,' + Date.now() + "," + value
            }).then(function(rsp){
                return rsp.json()
            }).then(function(obj){
                document.getElementById("rspInput").
                innerHTML = '<li> success:'+obj.success+", reason:"+obj.reason
            })
        }
    </script>
    <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>
        var grid = null;
        function gridData(){
            const query = `select * from EXAMPLE where name = 'webapp' order by time desc`;
            fetch(`/db/query?timeformat=Default&tz=local&q=`+query).then(function(rsp){
                return rsp.json()
            }).then(function(obj){
                if (grid == null) {
                    grid = new gridjs.Grid({
                        columns: obj.data.columns,
                        data: obj.data.rows,
                        width: "800px",
                        pagination:{ limit: 5, summary: false }
                    })
                    grid.render(document.getElementById("rspGrid"))
                } else {
                    grid.updateConfig({
                        data: obj.data.rows,
                    }).forceRender();
                }
            })
        }
    </script>
</head>
<body>
    <h4> Input data </h4>
    <form>
        <input id="userInput">
        <a href="#" onClick="submitData()">Submit</a>
    </form>
    <div id="rspInput"></div>
    <h4> Grid </h4>
    <a href="#" onClick="gridData()">Refresh</a>
    <div id="rspGrid"></div>
</body>
</html>

最終更新日 9月 10, 2026

乱数データのWebアプリ mermaid.jsのガントチャート