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

2022 年 2 月 19 日
筆記
學習筆記

前言

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

Webix 入門

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

官方的入門demo是：

入門文檔在這裡：//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 添加 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: '窗口欄' }
                    ]
                }
            ]
        });

效果圖如下：

程式碼解釋：

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

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

Toolbar的更多屬性文檔在這裡：//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"}]

效果如下：

程式碼解釋：

使用了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');
            });
        });

效果如下：

程式碼解釋：

使用了個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，內容隨便，放在同目錄下。

最終效果如下：

程式碼解釋：

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

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

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

鏈接: //pan.baidu.com/s/1Cv0tNRVUVVhkZbTC-6l4rw

提取碼: 97y8

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

Tags: 學習筆記