![EasyUI+JavaWeb奖助学金管理系统[10]-通过弹窗新增项目](http://www.mshxw.com/aiimages/31/237034.png "EasyUI+JavaWeb奖助学金管理系统[10]-通过弹窗新增项目")
上一章已实现了项目信息的分页浏览，本章来实现新增项目的功能。为了方便用户使用，我们通过弹窗来实现项目信息的输入。最终达到如下效果：
在body中添加操作栏，并在操作栏中添加新增按钮
序号
类型
名称
简介
然后稍微调下样式：
.tool-box {
margin-bottom: 12px;
}
注意新增绑定了btnAddClick方法，所以在此方法中可以操作弹窗。
解释下，执行btnAddClick方法后，id为dialog-add的弹窗将显示在页面上。
4. 弹窗代码编辑我们根据需要开发下弹窗代码：
类型：
名称：
简介：
保存
注意使用class="easyui-dialog"样式后，div默认隐藏，并且在显示时会将内容显示为弹窗样式。
5. 提交新增内容点击保存按钮，执行btnAddSubmit方法，如下。注意新增成功后，需要重新加载数据表格，以便从界面上显示新增的项目信息。
// 新增保存
function btnAddSubmit() {
var param = {
type: $("#add-type").val(),
name: $("#add-name").val(),
about: $("#add-about").val(),
}
$.ajax({
url: "CoreServlet?method=addProject",
type: "post",
dataType: "json",
data: param,
success: function (res) {
console.log(res);
if (res.code == 0) {//成功则刷新表格
$('#mainTable').datagrid('reload');
$('#dialog-add').dialog('close');//关闭新增弹窗
} else {//提示错误信息
alert(res.msg);
}
},
});
}
后台处理就很简单了，接收前端输入的参数然后插入数据库就OK。
// 新增项目保存
else if (method.equals("addProject")) {
ProjectDao projectDao = new ProjectDao();
Project project = new Project();
project.setType(request.getParameter("type"));
project.setName(request.getParameter("name"));
project.setabout(request.getParameter("about"));
projectDao.insert(project);
result.setCode(0);
result.setMsg("操作成功");
}
重启tomcat可进行测试验证，大功告成。
