• [入门到吐槽系列] 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: '辰同学',  200, align: 'right' },
                        { view: 'button', label: '退出',  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: '辰同学',  200, align: 'right' },
                        { view: 'button', label: '退出',  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: '辰同学',  200, align: 'right' },
                        { view: 'button', label: '退出',  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: '辰同学',  200, align: 'right' },
                        { view: 'button', label: '退出',  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分钟从入门到吐槽：
  • 相关阅读:
    [bzoj] 2565 最长双回文串
    [codeforces] 17E Palisection
    luogu P3267 [JLOI2016/SHOI2016] 侦查守卫
    181020-181021 模拟 题解
    luogu P2571 [SCOI2010]传送带
    poj1064 Cable master
    poj1422 Air Raid
    luogu P2512 [HAOI2008]糖果传递
    CF549H Degenerate Matrix
    左偏树基础教学
  • 原文地址：https://www.cnblogs.com/zc22/p/15912342.html
Copyright © 2020-2023  润新知