前言
本人是服务端程序员，同时需要兼职前端开发。常用的就是原生态的HTML、Javascript，也用过ExtJS、Layui。可是ExtJS变公司后非常难用。Layui上手还行，用过一段时间，会觉得html+css+js的混杂编程感觉很乱。所以想寻找纯Javascript UI框架。搜了半天，终于发现Webix这款成熟度比较高的框架，所以就这么开始了踩坑。
Webix 入门
Webix是个Javascript UI框架，官方网站在：https://webix.com/。
官方的入门demo是：
![[入门到吐槽系列] Webix 10分钟入门 一 管理后台制作_第1张图片](http://img.e-com-net.com/image/info8/98e838ac122b4550a61b4a0ecc5af8aa.jpg)
入门文档在这里：https://docs.webix.com/desktop__getting_started.html。
可是这个入门演示是跑不起来的，缺少了必备代码data array，也不知道作者搞这么个坑，有什么意思。
所以咱们就把48小时踩坑之旅分享出来，分为两篇文章。带大家成功开发一个管理后台，并展现出如何从入门到吐槽的过程。先看看效果图如下：
![[入门到吐槽系列] Webix 10分钟入门 一 管理后台制作_第2张图片](http://img.e-com-net.com/image/info8/690408dfb1174dda8827f34aa7d475f8.jpg)
这是一个很简陋的管理后台，左侧导航菜单，右侧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分钟入门 一 管理后台制作_第3张图片](http://img.e-com-net.com/image/info8/f53218db0a9b4939aac75b123ff03091.jpg)
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分钟入门 一 管理后台制作_第4张图片](http://img.e-com-net.com/image/info8/6622d48053e644bd8acc66e1c3603a7d.jpg)
代码解释：
现在我们有了头部工具条、左侧导航列表，右侧子窗口界面。具体让我们解释下红色高亮代码：
- 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分钟入门 一 管理后台制作_第5张图片](http://img.e-com-net.com/image/info8/e374e90f12554aa5b990f50ff0882ae2.jpg)
代码解释：
- 使用了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分钟入门 一 管理后台制作_第6张图片](http://img.e-com-net.com/image/info8/5109abb279eb43e5a86771272f43e243.jpg)
代码解释：
- 使用了个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分钟入门 一 管理后台制作_第7张图片](http://img.e-com-net.com/image/info8/24c1df462dd74203a148da955a41a177.jpg)
代码解释：
- 首先，我们移除上面例子中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分钟入门 一 管理后台制作_第8张图片](http://img.e-com-net.com/image/info8/b872b40d2701487a9adfbb4dcdd8e076.jpg)