java脚本弹出输入框,使用弹出框编辑(增加)表单内容

0、背景

使用Amazeui中Prompt 模态窗口Modal

1、JQuery

功能：

表单复位

获取表单的值，并显示在修改弹出框中(文本框、单选、多选、下拉框)

发送Post异步请求给后台

自刷新

$(function () {

//编辑功能

$('table .edit').on("click", function () {

//表单复位

document.getElementById("form-machineRole").reset();

var $td = $(this).parents("td");

//文本框

var machineRoleId = $td.attr("machineRoleId");

$("#basicSet [name='machineRoleId']").val(machineRoleId);

//列表框(级联)

var webSiteConfig = $td.attr("webSiteConfig");

$("#basicSet select").val(webSiteConfig);

$("#basicSet select option[value='" + webSiteConfig + "']").attr("selected", true);

//单选

var isUnique = $td.attr("isUnique");

$("#basicSet [name='isUnique'][value='" + isUnique + "']").attr("checked", true);

openModal();

})

//添加功能

$('#roleList_add').on("click",function(){

document.getElementById("form-machineRole").reset();

openModal();

})

function openModal(){

$('#basicSet').modal({

relatedTarget: this,

onConfirm: function (e) {

$("#basicSet select").trigger("change");

doPost("/machine/role/list/add", $("#form-machineRole").serializeArray(), function () {

location.replace(location.href);

});

}

});

}

})

2、 弹出框表格

基本设置

//将需要传到后端的数据放入表单，然后隐藏。

角色名称

网站配置

提交

取消

##3、后台springMVC

这里使用到了POJO对象绑定请求参数：即springMVC会按请求参数名和POJO属性名进行自动匹配，自动为该对象填充属性值。

*　同时JPA有个功能，即主键为null，create；主键不为null，自动的update。

@RequestMapping(value = "/config/list/add", method = RequestMethod.POST)

public String configList(WebSiteConfig webSiteConfig) {

if(webSiteConfig.getWebSiteConfigId()==null){

webSiteConfig.setInsertTime(new Date());

}

webSiteConfig.setUpdateTime(new Date());

webSiteConfigRepository.save(webSiteConfig);

return "SUCCESS";

}

重点：列表涉及到级联操作

错误整理

错误1：nested exception is org.hibernate.id.IdentifierGenerationException: ids for this class must be manually assigned before calling save()

主键上面增加：@GeneratedValue(strategy = GenerationType.IDENTITY)