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

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

上一篇从后台获取的数据并显示在list组件中,这一篇通过ajax提交需要删除的数据给后台,后台删除后返回一个json字符串给页面,页面使用消息将json字符串显示返回的提示

第一步:在服务器端创建delMovWithJson闭包

这个闭包从客户端获取需要删除的对象,根据对象id删除数据库中的记录,并返回一个json字符串


def delMovWithJson = {
    def resultAsJson = [result: "success", message: "The mov has been deleted."]
    def movInstance = Mov.get( params.id)
        if(movInstance) {
            try {
                movInstance.delete()
            } catch(org.springframework.dao.DataIntegrityViolationException e) {
                resultAsJson.result = "fail"
                resultAsJson.message = "Database error, failed to delete the mov."
            }
        } else {
            resultAsJson.result = "fail"
            resultAsJson.message = "Mov not found in database."
        }
    render resultAsJson as JSON
}

第二步:修改页面代码,增加ajax提交

页面代码中,点击删除按钮,页面弹出是否删除的提示,点确定删除后,给服务器发送ajax请求,并从列表中删除对象


function delete_row() {
    var id = $$("mylist").getSelectedId();
    var values = $$("myform").getValues();

    webix.confirm({
        title: "Delete",
        text: "Are you sure you want to delete the selected contact?",
        callback: function(result) { 
            if (result) {
            	webix.ajax().post("delMovWithJson", values, function(text,data) {
            		webix.message(data.json().message);
                           //webix.message({ type:"debug", text, expire:-1});
                    });
                $$("mylist").remove(id);
                $$('myform').clear();
            } 
        }
    });
}

第三步:在表单中增加id字段

因为服务器端使用的是get(id)获取表单信息,所以,表单中需要增加一个隐藏域,用来存放id字段


......
{view:"form", id:"myform", elements:[
    { view:"text", name:"id" ,hidden:true},
    { view:"text", name:"title", placeholder:"Title"},
    { view:"text", name:"year", placeholder:"Year"}
]},
......

转载于:https://my.oschina.net/65304586/blog/170140

你可能感兴趣的:(Webix学习笔记-创建一个基本应用程序-04-和服务器交互之Delete)