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"
            } 
        ]}
    ]
});