Webix入门（）

一、Webix介绍

Webix是Xb软件概述发布的JSUI库应用程序，包含80个完全可定制的组件，可以和CSS、HTML5构建交互式Web应用程序。其拥有以下特性而得以在很短的时间内圈粉无数。

跨浏览器

跨设备（PC、IOS、Android、Blackberry）

能访问离线Web存储、地理位置API、画布绘图

集成了JQuery和BackBone.js

提供了简单的服务端集成控件，可以和PHP、.NET、JAVA、Ruby等直接通信

灵活的布局

无限的可扩展性

可控的外观和感觉

直观的API

在桌面、移动和平板设备上自由切换

二、Webix特点

1、丰富的用户界面

库中提供几十个完全自定义的组件。

2、支持的数据格式:xml、json、jsarray、csv

开发人员可以使用偏好的格式指定数据。支持所有流行的数据格式。

3、直观的JS OOP

简单,重量轻的代码提供了简单的和可以理解的OOP概念。

4、简单的与服务器端集成

一些平台(PHP、.NET,Java)准备数据加载解决方案,保存、输出。

5、完整的API支持

全面详细描述可用的API。

6、无限的可扩展性

Webix不限制开发人员在扩展功能,并提供了丰富的组件可拓展性和创新性。

7、支持国际化和本地化

对国际化的支持允许被翻译和修改为本地版本的语言。

8、标准的css样式

您可以使用CSS结合组件内容实现所需的外观。Css可以应用于整个布局或特定的组件,项目等。

9、灵活的布局

每个元素的布局可以单独配置或布局的一部分:宽度、高度、颜色等。

10、动态过滤和排序

组件库提供了丰富的过滤和排序的方法,从内置的工具到完全自定义过滤处理逻辑。

11、可以显示或隐藏组件

任何组件的布局可以隐藏(显示)。

12、与jQuery的集成

Webix是集成了jQuery,允许您按照jQuery库的特点而开发,使用最少的配置。

13、动态组件时从服务器获取数据上下滚动

在处理大型数据集时,开发人员可以动态地加载数据减少复杂性和提高性能、轮询间隔和加载记录的数量控制。

14、多样化的事件回调:负载、排序等

多样化的事件回调让你处理可能发生的任何动作和处理过程。

15、内联编辑

所有数据包含组件在页面上可以直接编辑修改。

16、拖放

组件库既支持内部和外部dnd并允许定制“拖”,“放”操作。

17、与第三方库集成

Webix可以集成各种第三方库: Backbone. js, Google, Nokia and Yandex maps, Mercury, NicEdit, Tinymce and Code Mirror text editors等。

  18、复制到/从剪贴板

通过共同CTRL + C / CTRL + V键盘快捷键数据可以复制到其他应用程序进行进一步处理或在一个或几个组件。

19、离线支持

离线支持允许您的应用程序运行和离线更新,不要依赖于网络的状态。

20、数据绑定

允许您将几个组件绑定在一起,保持同步,即当数据的组件更改其值,其余组件自动更新,以反映这一变化。

21、可以定制的分页

一个或几个分页组件可以被添加到页面上显示一页一页的数据。数据从服务器端拉取，在需要时到相关页面打开相应数据。可配置每页的行数、模板导航控件等设置。

三、应用举例

例子１: 行和列

布局是通过行和列来决定的，行和列之间的border是通过type来设定的 type的可能值有"line" (default), "head", "space", "wide" and "clean" (borderless)

webix.ui({
    type:"line",
    rows: [
        { template:"Row 1"},
        { template:"Row2"}
    ]
});

例子２: width 和 height设置布局大小

布局的大小可以通过 width 和 height配置

webix.ui({
    width:400,
    height:200,
    type:"line",
    rows: [
        { template:"Row 1"},
        { template:"Row2"}
    ]
});

例子3: 自定义的html实现布局

布局的也可以通过自定义的html实现,通过配置container属性 

webix.ui({
    type: "line",
    container: "testA",
    // ...
});

例子4: 栏和列

• 列和栏可以相互嵌套，列中可以包含栏，栏里可以包含列

• {},//!empty也可以包含空的列或栏，但里面没有属性和组件

• view:"resizer" 一个缩放线可以设置之间的任何行和列的大小，但刷新后会恢复到原始

• width和height控制着显示栏或列的宽度高度。

webix.ui({
    type:"line",
    rows: [
        { template:"Row 1",height:50},
        {view:"resizer"}, //!resizer line
        { cols:[ //2nd row
            { template:"Column 1"},
            {},//!empty
            { template:"Column 2"}
        ]}
    ]
});

例子５: 工具栏与列表

1. 配置工具栏Toolbar 一般的第一个（上）行都放置工具栏按钮,用于用户与app交互 所有的webix组件和控件都有view属性，这个属性用来区别你是创建的是按以按钮，复选框，列表，表格等 注意，此时行的高度是随着工具栏里的控件的高度变化而变化的

2. view:"form" 为表单控件，为了得到用户数据，表单控件里包含其它许大量的控件这些控件被放在ows/elements 和 cols

3. align 表明控件里文本的相对位置，可能的值有"left" (default), "right" and "center."

4. list控件

   • 列表控件是一个包含数据的控件，主要有以下属性

   • data: 用于解析内联数据

   • url: 载入数据从一个文件或数据库

   • template: 定义数据的值，但必须是hash类型

   • datatype：识别来源数据的类型

   • webix支持JSON (default), JSArray, XML, CSV and HTML table 数据，如果没有指明，则用的是json

var filmset = [
    { id:1, title:"The Shawshank Redemption", year:1994},
    { id:2, title:"The Godfather", year:1972},
    { id:3, title:"The Godfather: Part II", year:1974},
    { id:4, title:"The Good, the Bad and the Ugly", year:1966},
    { id:5, title:"My Fair Lady", year:1964},
    { id:6, title:"12 Angry Men", year:1957}
];
webix.ui({
    type:"line",
    rows: [
        { view:"toolbar", id:"mybar", elements:[
            { view:"button", value:"Add", width: 70},
            { view:"button", value:"Delete", width: 70 },
            { view:"button", value:"Update", width: 70 },
            { view:"button", value:"Clear Form", width: 85 }]
        },
        { cols:[
            {view:"form", id:"myform", width:200, elements:[
                { view:"text", name:"title", placeholder:"Title", width:180, align:"center"},
                { view:"text", name:"year", placeholder:"Year", width:180, align:"center"} ]
            },
            {
                view:"list",
                id:"mylist",
                template:"#id# - #title# - #year#",
                select:false, //enables selection
                height:400,
                data: filmset
            }
        ]}
    ]
});

例子6: 事件,实现对列表的添删改查

将操作函数附加在控件上实现对App的交相事件

*　使用ID * 必须指定事件在一个组件视图中 * 附加一个函数到控件

如何添加一行数据到列表

*　为了增加一行数据到列表，首先要从表单中获取文本值。 *　获取表单的值用表单的ID, 如("myform").getValues() *　为了得到指定的值，需要指定表单里控件的name 如("myform").getValues().title

通过列表更新数据

1. 传输列表中所选的数据项到form中对应的域

2. 将form中己改变的数据替换掉原来列表中的数据

通过列表删除数据

1. 获取列表中所选项的ID

2. 将所选表列的数据从列表中的删除

改进删除表单,在删之前给出提示确认框,通过webix.confirm()实现

1. title,窗口标题

2. text,窗口的提示信息

3. callback，点选按按钮(yes或no)后的触发函数

    webix.ui.fullScreen();
    var filmset = [
        {id: 1, title: "The Shawshank Redemption", year: 1994},
        {id: 2, title: "The Godfather", year: 1972},
        {id: 3, title: "The Godfather: Part II", year: 1974},
        {id: 4, title: "The Good, the Bad and the Ugly", year: 1966},
        {id: 5, title: "My Fair Lady", year: 1964},
        {id: 6, title: "12 Angry Men", year: 1957}
    ];

    //function add_row() {
    //    webix.message("Add")
    //}
    //function update_row() {
    //    webix.message("Update")
    //}
    //function delete_row() {
    //    webix.message("Delete")
    //}


    webix.ui({
        rows: [
            {
                view: "toolbar", id: "mybar", elements: [
                {view: "button", value: "Add", width: 70, click: add_row},
                {view: "button", value: "Delete", width: 70, click: delete_row},
                {view: "button", value: "Update", width: 70, click: update_row},
                {view: "button", value: "Clear Form", width: 85, click: "$$('myform').clear()"}]
            },
            {
                cols: [
                    {
                        view: "form", id: "myform", width: 200, elements: [
                        {view: "text", name: "title", placeholder: "Title", width: 180, align: "center"},
                        {view: "text", name: "year", placeholder: "Year", width: 180, align: "center"}]
                    },
                    {
                        view: "list",
                        id: "mylist",
                        template: "#title# - #year#",
                        select: true, //enables selection
                        height: 400,
                        data: filmset
                    }
                ]
            }
        ]
    });
    //adding form data to a list while creating a new row for it
    function add_row() {
        $$("mylist").add({
            title: $$("myform").getValues().title,
            year: $$("myform").getValues().year,
        })
    }
    //一旦选择某项，则会自动将传设置到form表单中
    $$("mylist").attachEvent("onAfterSelect", function (id) {
        $$("myform").setValues({
            title: $$("mylist").getItem(id).title,
            year: $$("mylist").getItem(id).year
        });
    });
    function update_row() {
        //获取列表中所选项的ID
        var sel = $$("mylist").getSelectedId();
        if (!sel) return;
        //得到form表单中改变的值
        var value1 = $$("myform").getValues().title;
        var value2 = $$("myform").getValues().year;

        //获取列表中所选择的项并对相关属性赋值
        var item = $$("mylist").getItem(sel); //selected item object
        item.title = value1;
        item.year = value2;
        //对列表中原来的对象赋值
        $$("mylist").updateItem(sel, item);
    }

    function delete_row()
    {
        //获取列表中所选项的ID
        var sel = $$("mylist").getSelectedId();
        if (!sel) return;
        var item = $$("mylist").getItem(sel); //selected item object
        var title=item.title;
        var year=item.year;
        webix.confirm({
            title: "Delete",
            text: "Are you sure you want to delete ["+title+" - "+year+"] from the list?",
            callback: function(result) {
                if (result) {
                    //将所选表列的数据从列表中的删除
                    $$("mylist").remove(sel);
                }
            }
        });

    }

require([
    "webix"
], function(webix) {
    webix.ready(function() {
        console.log("webix ready event"); // never run
    });
})

require([
    "webix"
], function(webix) {
    webix.ready(function() {
        console.log("webix ready event");
    });

    webix.callEvent("onReady", []); //triggers ready state
})

参考源码：https://github.com/tomlxq/best-practice