[入門到吐槽系列] Webix 10分鐘入門 一 管理後臺製作

辰發表於2022-02-19
Web

前言

本人是服務端程式設計師，同時需要兼職前端開發。常用的就是原生態的HTML、Javascript，也用過ExtJS、Layui。可是ExtJS變公司後非常難用。Layui上手還行，用過一段時間，會覺得html+css+js的混雜程式設計感覺很亂。所以想尋找純Javascript UI框架。搜了半天，終於發現Webix這款成熟度比較高的框架，所以就這麼開始了踩坑。

 

Webix 入門

Webix是個Javascript UI框架，官方網站在：https://webix.com/。

官方的入門demo是：

入門文件在這裡：https://docs.webix.com/desktop__getting_started.html。

可是這個入門演示是跑不起來的，缺少了必備程式碼data array，也不知道作者搞這麼個坑，有什麼意思。

所以我們們就把48小時踩坑之旅分享出來，分為兩篇文章。帶大家成功開發一個管理後臺，並展現出如何從入門到吐槽的過程。先看看效果圖如下：

 

 

這是一個很簡陋的管理後臺，左側導航選單，右側iframe載入外部頁面。功能包括了：

  • 後臺框架部分：
    • Accordion+List：左側導航摺疊與展開
    • Multiview：點選導航，新建Tab子頁面，載入外部html頁面。
    • Ajax：載入伺服器資料
  • 子頁面部分：
    • Form：表單輸入提交
    • Uploader：檔案上傳
    • Datatable：表單顯示
    • Pager：分頁控制元件使用

把上面的技術走一遍之後，10分鐘就能夠讓大家完全掌握Webix，並一起加入吐槽行列。

 

 

Webix的佈局

<html>
<head>
    <link rel="stylesheet" href="//cdn.webix.com/edge/webix.css" type="text/css">
    <script src="//cdn.webix.com/edge/webix.js" type="text/javascript"></script>
</head>
<body>
    <script type="text/javascript" charset="utf-8">
        webix.ui({
            rows: [
                { view: "template" },
                {
                    cols: [
                        { view: "template" },
                        { view: "template" }
                    ]
                }
            ]
        });
    </script>
</body>
</html>

佈局的思路是從上到下新增行，再從左到右每行新增列，其實一個大括號就可以了，這裡方便演示，加入了view的屬性，表示這個大括號使用了什麼元件（見下文）。效果如下：

[入門到吐槽系列] Webix 10分鐘入門 一 管理後臺製作

 

 

 

 

Webix 新增 UI Widget / UI Control 元件

webix本質就是個程式碼生成器，他把我們常用的後臺功能封裝成了元件，用JS方式組裝，並通過ID呼叫。

我們整理下佈局，把後臺基本結構完成，程式碼如下（接下來我們都會只展示JS部分，大家替換下到Html就好）：

        webix.ui({
            rows: [
                {
                    id: "toolbar", view: "toolbar",
                    elements: [
                        { view: 'label', label: '辰同學的Webix入門講解' },
                        {}, // 這個很重要，讓控制元件左右對齊
                        { view: 'label', label: '辰同學', width: 200, align: 'right' },
                        { view: 'button', label: '退出', width: 80, },
                    ]
                },
                {
                    cols: [
                        {
                            gravity: 0.2,
                            template: '導航欄'
                        },
                        { template: '視窗欄' }
                    ]
                }
            ]
        });

效果圖如下：

[入門到吐槽系列] Webix 10分鐘入門 一 管理後臺製作

 程式碼解釋：

現在我們有了頭部工具條、左側導航列表，右側子視窗介面。具體讓我們解釋下紅色高亮程式碼：

  • view:"toolbar"：表示我使用了Toolbar這個自帶widget，效果是一條窄工具條介面。
  • Toolbar預設使用了列布局，elements等同於cols屬性。
  • 在Toolbar裡面，我們在列中，增加了個空括號{}，讓控制元件實現左右對齊佈局。
  • 在第二行列布局，有個很晦澀的屬性“gravity”，本質是列布局各個控制元件的寬度比例。預設值是1。我設定了0.2，表示左右兩個列的比例關係是 0.2 ： 1，實現了左邊更窄的效果。

Toolbar的更多屬性文件在這裡：https://docs.webix.com/desktop__toolbar.html。以後大家想用什麼控制元件，直接可以點選，左側選擇後，看api、sample。

 

 

Webix Accordion + List 元件的使用

接下來我們使用ajax方式載入選單，並顯示到介面，程式碼如下：

        webix.ui({
            rows: [
                {
                    id: "toolbar", view: "toolbar",
                    elements: [
                        { view: 'label', label: '辰同學的Webix入門講解' },
                        {}, // 這個很重要，讓控制元件左右對齊
                        { view: 'label', label: '辰同學', width: 200, align: 'right' },
                        { view: 'button', label: '退出', width: 80, },
                    ]
                },
                {
                    cols: [
                        {
                            gravity: 0.5,
                            rows: [
                                {
                                    view: "accordion", type: "wide",
                                    rows: [
                                        {
                                            header: "導航組1", body: {
                                                id: "menulist1", view: "list", template: "#id#. #title#", select: true,
                                            }
                                        },
                                        { header: "導航組2", body: "content 2", collapsed: true, },
                                        { header: "導航組3", body: "content 3", collapsed: true, },
                                    ]
                                }
                            ]
                        },
                        { template: '視窗欄' }
                    ]
                }
            ]
        });

        webix.ready(function () {
            webix.ajax().get('menu.json', {}).then(function (data) {
                console.log(data);
                var menulist = $$('menulist1');
                menulist.parse(data.json(), 'json');
            });
        });

外部資料menu.json如下，和頁面放在同一個目錄：

[{"id":1,"title":"選單1"},{"id":2,"title":"選單2"},{"id":3,"title":"選單3"},{"id":4,"title":"選單4"},{"id":5,"title":"選單5"},{"id":6,"title":"選單6"}]

效果如下：

 [入門到吐槽系列] Webix 10分鐘入門 一 管理後臺製作

 程式碼解釋：

  • 使用了Accordion控制元件，效果就是能夠摺疊。佈局是行佈局。
  • 摺疊皮膚裡面，使用List控制元件，屬性select表示是單選，預設是無選中效果。
  • 使用了ajax方式載入外部資料
  • 使用$$兩個美元符號，id的方式獲取介面配置的List
  • 使用了parse方法把載入的資料顯示到介面。

 

 

Webix Tab 元件的使用

程式碼如下：

        webix.ui({
            rows: [
                {
                    id: "toolbar", view: "toolbar",
                    elements: [
                        { view: 'label', label: '辰同學的Webix入門講解' },
                        {}, // 這個很重要，讓控制元件左右對齊
                        { view: 'label', label: '辰同學', width: 200, align: 'right' },
                        { view: 'button', label: '退出', width: 80, },
                    ]
                },
                {
                    cols: [
                        {
                            gravity: 0.5,
                            rows: [
                                {
                                    view: "accordion", type: "wide",
                                    rows: [
                                        {
                                            header: "導航組1", body: {
                                                id: "menulist1", view: "list", template: "#id#. #title#", select: true,
                                            }
                                        },
                                        { header: "導航組2", body: "content 2", collapsed: true, },
                                        { header: "導航組3", body: "content 3", collapsed: true, },
                                    ]
                                }
                            ]
                        },
                        {
                            rows: [{
                                id: "tabs", view: "tabbar", close: true, optionWidth: 200, height: 30, multiview: true,
                                options: [
                                    { value: '標籤1' }
                                ],
                            },
                            {
                                id: "views", animate: false, keepViews: true,
                                cells: [
                                    { view: 'template', template: '子視窗1' }
                                ]
                            }]
                        },
                    ]
                }
            ]
        });

        webix.ready(function () {
            webix.ajax().get('menu.json', {}).then(function (data) {
                console.log(data);
                var menulist = $$('menulist1');
                menulist.parse(data.json(), 'json');
            });
        });

效果如下：

[入門到吐槽系列] Webix 10分鐘入門 一 管理後臺製作

 程式碼解釋：

  • 使用了個Tabbar元件，就是標籤頁。
  • tabbar的close屬性，表示可點選關閉；multiview屬性，表示顯示多個子視窗（enables switching between multiview cells）
  • 下面的view預設就是個multivew了，animate屬性，表示不要花裡胡哨的左右橫移切換，keepViews屬性，表示切換標籤的時候，頁面不會重新載入。這個屬性太重要了。

 

webix iframe的動態載入

終於到了最後了！這裡實現了點選選單，動態載入iframe的複雜邏輯，程式碼如下：

 

        webix.ui({
            rows: [
                {
                    id: "toolbar", view: "toolbar",
                    elements: [
                        { view: 'label', label: '辰同學的Webix入門講解' },
                        {}, // 這個很重要，讓控制元件左右對齊
                        { view: 'label', label: '辰同學', width: 200, align: 'right' },
                        { view: 'button', label: '退出', width: 80, },
                    ]
                },
                {
                    cols: [
                        {
                            gravity: 0.5,
                            rows: [
                                {
                                    view: "accordion", type: "wide",
                                    rows: [
                                        {
                                            header: "導航組1", body: {
                                                id: "menulist1", view: "list", template: "#id#. #title#", select: true,
                                            }
                                        },
                                        { header: "導航組2", body: "content 2", collapsed: true, },
                                        { header: "導航組3", body: "content 3", collapsed: true, },
                                    ]
                                }
                            ]
                        },
                        {
                            rows: [{
                                id: "tabs", view: "tabbar", close: true, optionWidth: 200, height: 30, multiview: true,
 options: [],
                            },
                            {
                                id: "views", animate: false, keepViews: true, cells: [{}]
                            }]
                        },
                    ]
                }
            ]
        });

        webix.ready(function () {
            webix.ajax().get('menu.json', {}).then(function (data) {
                console.log(data);
                var menulist = $$('menulist1');
                menulist.parse(data.json(), 'json');
            });
        });

        $$("menulist1").attachEvent("onAfterSelect", function (id) {
            var item = $$('menulist1').getItem(id);
            if (!$$(item.id)) {
                $$("views").addView({
                    view: "iframe", id: item.id, src: "./subpage.html"
                });
                $$("tabs").addOption(item.id, item.title, true);
            }
            else {
                $$("tabs").setValue(item.id);
            }
        });

        $$("tabs").attachEvent('onBeforeTabClose', function (id) {
            $$('tabs').removeOption(id);
            $$('views').removeView(id);
        });

新建一個subpage.html，內容隨便，放在同目錄下。

最終效果如下：
[入門到吐槽系列] Webix 10分鐘入門 一 管理後臺製作

 程式碼解釋：

  • 首先，我們移除上面例子中tabs的options和views的cells模擬資料。不過cells要保留一個空括號，表示沒有標籤的底板。
  • 然後使用attachEvent，對左側導航新增點選事件onAfterSelect。
    • 這裡是個非常討厭的地方，webix不支援class選擇，只支援id選擇，所以如果有多個list，要一個個對他們繫結相同的事件。
  • 用$$(item.id)的方式，判斷標籤是否已經建立了。
    • 這裡又是個非常取巧討厭的地方，你特麼不能好好的給個getView之類的介面嗎？非要全域性id判斷，所以我們為view新增id的時候，要注意唯一性了。
  • 用addView和addOption方式，新增標籤和子視窗。
  • 新增了一個iframe的子視窗，載入了src目錄的頁面。這個頁面我們會在第二篇文章分享，大家可以自己隨便寫個子頁面，放在同一個目錄下。
  • 同樣對tab新增監聽onBeforeTabClose，裡面新增了對標籤和子視窗的移除。

到現在，我們就實現了一個功能非常完成的管理後臺了，雖然很簡單，但是隻要靈活結合控制元件和css的皮膚，就能夠做的漂亮。

 

本文所有程式碼在這裡可以下載：

連結: https://pan.baidu.com/s/1Cv0tNRVUVVhkZbTC-6l4rw

提取碼: 97y8

也歡迎大家關注我們們公眾號：辰同學技術 微信公眾號，同樣會分享各種技術10分鐘從入門到吐槽：

相關文章