2019独角兽企业重金招聘Python工程师标准>>> 
在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);
}
}
});
}