More than 1 year has passed since last update.

Webix サンプルコード

JavaScript

Posted at 2022-02-12

最近、久しぶりにwebixを使う機会があったため、サンプルを作成しました。
作成したサンプルは、github に上げておきました。

####webページ
https://nagajun1.github.io/webix_test/

#サンプルコード
サンプルコードを上げた github の URL はこれです。

コードの中身は以下の通りです。

index.html

<!DOCTYPE HTML>
<html>

<head>
    <link rel="stylesheet" href="//cdn.webix.com/edge/webix.css" type="text/css">
    <script src="./lib/webix.js" type="text/javascript"></script>
    <script src="indexPage.js" type="text/javascript"></script>
</head>

<body>
    <script type="text/javascript">
        webix.ready(function () { loadMainPage() });
    </script>
</body>

</html>

indexPage.js

function loadMainPage() {
    webix.ui({
        cols: [{
            rows: [{
                view: "template",
                type: "header",
                template: "list title",
                css: { "background-color": "#adcbd9" }
            }, {
                view: "list",
                id: "list_1",
                template: "#title#",
                select: true,
                data: [
                    { id: 1, title: "dummy 1 - 1 " },
                ]
            }, {
                view: "button",
                value: "output message",
                click: function () {
                    webix.message("click_button_a");
                }
            }]
        }, {
            view: "list",
            template: "#title#",
            select: true,
            data: [
                { id: 1, title: "dummy 1" },
                { id: 2, title: "dummy 2" },
            ]
        }]
    });

    for (let i = 0; i < 100; i++) {
        $$("list_1").add({
            id: "data_" + i,
            title: "dummy_" + i
        })
    }
}

#解説
重要だと感じる箇所だけ、ざっくりとメモっておきます。
・webix.ui()でテンプレートに沿ったJSONを読み込むことで、画面上にデザインが表示される。
・横並びにしたい場合はcols:[]に、縦並びはrows:[]に格納する。
・list 表示の項目はview: "list"で設定する。（下記を参照）

・各要素を取得したい場合は$$( 要素のid )で取得できる。

#参照
今回のサンプル作成に使用したリンクです。
cdn（cdn で読み込むと、一部文字化けでエラーになる...?）

webix 公式ページ

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up