Webix学习笔记-创建一个基本应用程序-02-让组件交互

在01中创建了一个简单的框架,里面放置了几个组件。在这一节中使用一些基本的方法和事件功能，让组件可以交互。

在上一节例子中，界面上增加了一个表单和一个列表。现在增加一个功能，填写表单，将内容保存到列表。选择列表中的信息，在表单中修改。和删除列表中的信息这几个功能。

第一步：设置ID和增加事件

首先分别给4个按钮增加单击事件

{ 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:70, click:"$$('myform').clear())"}

给表单元素增加id属性

{view:"form", id:"myform", elements:[...]},
{view:"list", id:"mylist", template:"..."}

给列表元素增加name属性

{ view:"text", name:"title", placeholder:"Title"},  
{ view:"text", name:"year", placeholder:"Year"}

第二步：增加删除事件

选择list中某行，点删除按钮

function delete_row(){
    var id = $$("mylist").getSelectedId(); //returns the ID of selected item
    $$("mylist").remove(id);
}

第三步：增加添加事件

填写表单，点增加按钮将表单中的内容添加到list

function add_row() {
    $$("mylist").add({
        title: $$("myform").getValues().title,
        year: $$("myform").getValues().year,
    })
}

第四步：增加更新事件

• 首先选择列表，将列表中的某行的值赋给表单

代码如下

$$("mylist").attachEvent("onAfterSelect", function(id){
    $$("myform").setValues({
        title: $$("mylist").getItem(id).title,
        year: $$("mylist").getItem(id).year 
    });
});

• 然后修改表单数据，点更新按钮，将表单的值返回给list

代码如下

function update_row() {
    var sel = $$("mylist").getSelectedId(); //checks whether the item is selected
    if(!sel) return; // if not, function execution is stopped

    var value1 = $$('myform').getValues().title; 
    var value2 = $$('myform').getValues().year;

    for (var i = 0; i < sel.length; i++){
        var item = $$("mylist").getItem(sel[i]); //for every selected item
        item.title = value1; //setting values for list item
        item.year = value2;
        $$("mylist").updateItem(sel[i], item); //updating
    }
}

第五步：确认窗口

在删除数据时，需要客户确认删除的数据是否正确，改写一下删除事件

function delete_row() {
    var id = $$("mylist").getSelectedId();
    webix.confirm({
        title: "Delete",
        text: "Are you sure you want to delete the selected contact?",
        callback: function(result) { 
            if (result) {
                $$("mylist").remove(id);
            } 
        }
    });
}