点击列表上面的添加，弹出一个模态框，这个里面就可以添加数据了
先写出一个模态框，并且要隐藏，只有点击了添加按钮之后才可以弹出来，具体实现如下：
先写一个模态框，并且是隐藏的
代码语言：javascript复制<%--添加的界面--%>
<%--添加按钮组--%>
<div id="datagridtooradd">
<a href="javascript:void(0)" >添加</a>
<a href="javascript:void(0)" >清空</a>
</div>
<di
v id="dialogadd" align="center">
<form id="addform" action="/add" method="post">
<table>
<tr>
<td>名字</td>
<td><input type="text" name="name" id="name"/></td>
</tr>
<tr>
<td>性别</td>
<td><input type="text" name="gender" id="gender"/></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" name="age" id="age"/></td>
</tr>
<tr>
<td>手机</td>
<td><input type="text" name="phone" id="phone"/></td>
</tr>
<tr>
<td>地址</td>
<td><input type="text" name="address" id="address"/></td>
</tr>
</table>
</form>
</div>// 生效添加用户的easyui的样式
$('#dialogadd').dialog({
width:300,
title:"添加客户信息",
iconCls:"icon-man",
buttons:"#datagridtooradd",
closed:true //定义这个弹框初始化的时候是关闭的
})写了以上的代码，那么就有模态框了，只是我们看不见，因为 closed:true 关闭了
给添加按钮加一个事件，让模态框出来
代码语言：javascript复制//生效列表按钮组
$('#datagridtoorbar>a:contains(添加)').linkbutton({
iconCls:"icon-add",
onClick:function () {
// 1 显示框 修改dialog的closed的属性
$('#dialogadd').dialog({
closed:false,
// 是对话框有灯罩的效果
modal:true
})
}
});一点击了之后，走对应的事件，那么模态框就出来了
我们填完数据之后，一点击模态框里面的添加按钮，应该向后台传数据，现在就需要在这个添加按钮上面加事件了，具体 代码如下：
代码语言：javascript复制// 生成添加按钮组的样式
$('#datagridtooradd>a:contains(添加)').linkbutton({
iconCls:"icon-ok",
onClick:function () {
// 1 将表单的数据进行提交
$('#addform').form('submit',{
success:function (data) {
console.log(data);
var parse = JSON.parse(data);
$.messager.show({
title:"提示",
msg:parse.msg
});
$('#dialogadd').dialog({
closed:true
});
// 2 在表单提交成功之后，datagrid重新的加载
$("#datagridpersion").datagrid("reload")
// 清空表单
$("#addform").form("clear")
}
})
}
});以上前端就完成了，添加按钮也有事件了，form表单上的action的值就是传的url路径 现在开始写后端
代码语言：javascript复制// 添加用户
@ResponseBody
@RequestMapping("/add")
public Object add(person p){
System.out.println(p);
int i = persionService.addPersion(p);
Map<String, String> map = new HashMap<>();
map.put("code","200");
map.put("msg","添加成功");
return map;
} <insert id="addPersion">
insert into persion(name,age,gender,phone,address) values (#{name},#{age},#{gender},#{phone},#{address})
</insert>
