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

上一篇从后台获取的数据并显示在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"}
]},
......