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

前言

本人是服務端程序員，同時需要兼職前端開發。常用的就是原生態的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 添加 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的更多屬性文檔在這裏：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"}]

效果如下：

代碼解釋：

使用了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的皮膚，就能夠做的漂亮。

本文所有代碼在這裏可以下載：

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

提取碼: 97y8

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

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

前言

Webix 入門

Webix的佈局

Webix 添加 UI Widget / UI Control 組件

Webix Accordion + List 組件的使用

Webix Tab 組件的使用

webix iframe的動態加載

【破解】webix 9.1.6 試用版彈窗提示破解教程

【經驗】微信小程序 canvas 圖片拉伸對 wx.canvasToTempFilePath 截圖導出的影響。

【經驗】微信小程序Canvas 的畫圖尺寸學習研究。

[入門到吐槽系列] 微信小程序上傳圖片前端壓縮保存到雲存儲使用Canvas新API的巨坑！

[入門到吐槽系列] 微信小程序敏感違規圖片檢測 mediaCheckAsync，客服接口消息推送的各種坑分享！

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

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

前言

Webix 入門

Webix的佈局

Webix 添加 UI Widget / UI Control 組件

Webix Accordion + List 組件的使用

Webix Tab 組件的使用

webix iframe的動態加載

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