[入门到吐槽系列] 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分钟从入门到吐槽：