トッカンソフトウェア

TssGrid

TssGridはテーブル表示のライブラリです。
”あ”と入力したときにaとならないで、”あ”と入力されるため、日本語入力に適しています。

公式ページはこちらになります。

テーブル表示(オブジェクト)


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>TssGrid のテストページ</title>

    <link rel="stylesheet" href="libs/TssGrid/tssgrid.css">
    <script src="libs/TssGrid/tssgrid.js"></script>
</head>

<body>
    <div id="grid"></div>
    <script>

        var tabledata = [
            { a: "aaa1", b: "bbb1", c: "ccc1" },
            { a: "aaa2", b: "bbb2", c: "ccc2" },
            { a: "aaa3", b: "bbb3", c: "ccc3" },
        ];

        var table = new TssGrid(document.getElementById('grid'), {
            columns: [
                { title: "TitleA", data: "a" },
                { title: "TitleB", data: "b" },
                { title: "TitleC", data: "c" },
            ],
            data: tabledata,
        });


    </script>
</body>

</html>
実行結果

テーブル表示(配列)

２次元配列でも表示できます。
ヘッダの簡易表示もできます。 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>TssGrid のテストページ</title>

    <link rel="stylesheet" href="libs/TssGrid/tssgrid.css">
    <script src="libs/TssGrid/tssgrid.js"></script>
</head>

<body>
    <div id="grid"></div>
    <script>

        var tabledata = [
            ["aaa1", "bbb1", "ccc1"],
            ["aaa2", "bbb2", "ccc2"],
            ["aaa3", "bbb3", "ccc3"],
        ];

        var table = new TssGrid(document.getElementById('grid'), {
            headers: [
                "TitleA", "TitleB", "TitleC",
            ],
            data: tabledata,
        });


    </script>
</body>

</html>
実行結果

スタイル

全体に対し条件指定でスタイルを指定したり、列毎に条件指定でスタイルを指定できます。 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>TssGrid のテストページ</title>

    <link rel="stylesheet" href="libs/TssGrid/tssgrid.css">
    <script src="libs/TssGrid/tssgrid.js"></script>

    <style>
        #grid .tssgrid td {
            background: lightgray;
        }

        #grid .tssgrid td.ddd {
            background: yellow;
        }

        #grid .tssgrid td.eee {
            background: lightgreen;text-align: center;
        }
    </style>
</head>

<body>
    <div id="grid"></div>
    <script>

        var tabledata = [
            { a: "aaa1", b: "bbb1", c: "ccc1" },
            { a: "aaa2", b: "bbb2", c: "ccc2" },
            { a: "aaa3", b: "bbb3", c: "ccc3" },
        ];

        var table = new TssGrid(document.getElementById('grid'), {
            columns: [
                { title: "TitleA", data: "a" },
                { title: "TitleB", data: "b" },
                {
                    title: "TitleC", data: "c",
                    cellClass: v => v != 'ccc3' ? 'eee' : '',
                },
            ],
            cellClass: (r, c) => c == 0 && r == 0 ? 'ddd' : '',

            data: tabledata,
        });

    </script>
</body>

</html>
実行結果

読み込み専用

全体、列毎、セルごとに読み込み専用にできます。 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>TssGrid のテストページ</title>

    <link rel="stylesheet" href="libs/TssGrid/tssgrid.css">
    <script src="libs/TssGrid/tssgrid.js"></script>
</head>

<body>
    <div id="grid"></div>
    <script>

        var tabledata = [
            { a: "aaa1", b: "bbb1", c: "ccc1" },
            { a: "aaa2", b: "bbb2", c: "ccc2" },
            { a: "aaa3", b: "bbb3", c: "ccc3" },
        ];

        var table = new TssGrid(document.getElementById('grid'), {
            //全体を読み込み専用にする場合、ここをtrue
            readOnly: false,
            columns: [
                { title: "TitleA", data: "a", readOnly: true, },
                { title: "TitleB", data: "b" },
                { title: "TitleC", data: "c" },
            ],
            data: tabledata,
        });

        table.setCellReadOnly(true, { r0: 1, c0: 1, r1: 1, c1: 1 }); 
    </script>
</body>

</html>
実行結果

マージセル

行、列のどちらに対してもマージセルできます。 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>TssGrid のテストページ</title>

    <link rel="stylesheet" href="libs/TssGrid/tssgrid.css">
    <script src="libs/TssGrid/tssgrid.js"></script>
    <script src="libs/TssGrid/tss-merge.js"></script>
</head>

<body>
    <div id="grid"></div>
    <script>

        var tabledata = [
            { a: "aaa1", b: "bbb1", c: "ccc1" },
            { a: "aaa2", b: "bbb2", c: "ccc2" },
            { a: "aaa3", b: "bbb3", c: "ccc3" },
        ];

        var table = new TssGrid(document.getElementById('grid'), {
            columns: [
                { title: "TitleA", data: "a" },
                { title: "TitleB", data: "b" },
                { title: "TitleC", data: "c" },
            ],
            plugins: [TssMerge.plugin({
                merges: [
                    { r: 0, c: 0, colspan: 1, rowspan: 2 },
                ],
            })],
            data: tabledata,
        });

        table.setMerge(1, 1, 2, 1);

    </script>
</body>

</html>
実行結果

列固定

行、列のどちらに対しても列固定できます。 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>TssGrid のテストページ</title>

    <link rel="stylesheet" href="libs/TssGrid/tssgrid.css">
    <script src="libs/TssGrid/tssgrid.js"></script>
</head>

<body>
    <div id="grid"></div>
    <script>

        let columnsX = [];
        for (let x = 0; x < 20; x++) {
            columnsX.push({
                title: 'title' + x,
            });
        }

        var datas = [];
        for (let y = 0; y < 500; y++) {
            var data = [];
            for (let x = 0; x < columnsX.length; x++) {
                data.push("data_" + y + "_" + x);
            }
            datas.push(data);
        }

        var table = new TssGrid(document.getElementById('grid'), {
            columns: columnsX,
            data: datas,
            width: 620,
            height: 280,
            frozenCols: 2,
            frozenRows: 2,
        });

    </script>
</body>

</html>
実行結果

データセット、ゲット


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>TssGrid のテストページ</title>

    <link rel="stylesheet" href="libs/TssGrid/tssgrid.css">
    <script src="libs/TssGrid/tssgrid.js"></script>
</head>

<body>
    <div id="grid"></div>
    <br />
    <button onclick="getData()">getData</button>
    <button onclick="getRowData()">getRowData</button>
    <button onclick="getRows()">getRows</button>
    <button onclick="getColumn()">getColumn</button>
    <button onclick="getColumns()">getColumns</button>
    <button onclick="getValue()">getValue</button>
    <br />
    <button onclick="setValue()">setValue</button>
    <button onclick="setData()">setData</button>
    <br />
    <button onclick="toCSV()">toCSV</button>
    <button onclick="downloadCSV()">downloadCSV</button>

    <script>

        var tabledata = [
            { a: "aaa1", b: "bbb1", c: "ccc1" },
            { a: "aaa2", b: "bbb2", c: "ccc2" },
            { a: "aaa3", b: "bbb3", c: "ccc3" },
        ];

        var table = new TssGrid(document.getElementById('grid'), {
            columns: [
                { title: "TitleA", data: "a" },
                { title: "TitleB", data: "b" },
                { title: "TitleC", data: "c" },
            ],
            data: tabledata,
        });

        function getData() {

            alert(JSON.stringify(table.getData()));
        }
        function getRowData() {
            alert(JSON.stringify(table.getRow(0)));
        }
        function getRows() {
            alert(JSON.stringify(table.getRows()));
        }
        function getColumn() {
            alert(JSON.stringify(table.getColumn("a")));
        }
        function getColumns() {
            alert(JSON.stringify(table.getColumns()));
        }
        function getValue() {
            alert(JSON.stringify(table.getValue(0, 0)));
            // 以下も同じデータを取得
            //alert(JSON.stringify(table.getValue(0,"a")));
        }

        function setValue() {
            table.setValue(0, 'a', 'X1');
            table.setValue(0, 1, 'X2');
        }
        function setData() {
            table.setData([
                { a: "A1", b: "B1", c: "C1" },
                { a: "A2", b: "B2", c: "C2" },
                { a: "A3", b: "B3", c: "C3" },
            ]);
        }
        function toCSV() {
            alert(JSON.stringify(table.toCSV()));
        }
        function downloadCSV() {
            table.downloadCSV("test.csv")
        }
    </script>
</body>

</html>
実行結果



環境構築

https://github.com/threestarsoftware/TssGrid にアクセスして、以下をダウンロードします

zipファイルを解凍して、以下のファイルを取得し、参照するようにします。
参照例 

<link rel="stylesheet" href="libs/TssGrid/tssgrid.css">
<script src="libs/TssGrid/tssgrid.js"></script>
マージセルを行う場合、以下も取得します。
参照例 

<script src="libs/TssGrid/tss-merge.js"></script>


ページのトップへ戻る