Webix学习笔记-创建一个基本应用程序-03-和服务器交互之Retrieve

前面几个部分已经完成了界面上的所有工作。这些工作包括：

在表单中填写信息按保存按钮将信息保存到列表

选择列表中的某信息，修改后点击更新按钮可以更新信息

选择列表中的某信息，点击删除按钮，提示是否删除，点击是可以删除列表中的信息

这一节将列表中的信息从后台数据库中读出来并显示到list中。因为要用到服务器端技术，这里使用Grails作为web服务端。步骤如下：

第一步：建立一个example项目，创建domain和controller

grails create-app com.example.movdemo
grails create-domain-class com.example.mov
grails create-controller com.example.base

第二步：在controller中创建一个返回movlist as json的闭包

def getMovAsJson = {
if(!Mov.list()) {
new Mov(title:'The Shawshank Redemption',year:'1994').save()
new Mov(title:'The Godfather',year:'1972').save()
new Mov(title:'The Godfather: Part II',year:'1974').save()
new Mov(title:'The Good, the Bad and the Ugly',year:'1966').save()
new Mov(title:'My Fair Lady',year:'1964').save()
new Mov(title:'12 Angry Men',year:'1957').save()
new Mov(title:'X Man',year:'1990').save()
}

render Mov.list() as JSON
}

第三步：在view中修改数据获取方式为url

webix.ui({
width:500,
rows: [
{ view:"toolbar", 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:70, click:"$$('myform').clear())"}
]},
{ height:120, cols:[
{view:"form", id:"myform", elements:[
{ view:"text", name:"title", placeholder:"Title"},
{ view:"text", name:"year", placeholder:"Year"}
]},
{
view:"list",
id:"mylist",
template:"#title# - #year#", // which data to show
select:true, //enables selection
height:400,
url:"getMovAsJson"
}
]}
]
});