1. 本章任务
上一章已实现了项目信息的分页浏览，本章来实现新增项目的功能。为了方便用户使用，我们通过弹窗来实现项目信息的输入。最终达到如下效果：
2. 添加新增按钮
在body中添加操作栏，并在操作栏中添加新增按钮
<body>
<div class="tool-box"><!-- 操作栏 -->
<a id="btn" onclick="btnAddClick()" href="#" class="easyui-linkbutton"
data-options="iconCls:'icon-add'">新增</a>
</div>
<table id="mainTable" title="项目列表" class="easyui-datagrid"
url="CoreServlet?method=getProjectPage" pagination="true"
singleSelect="true" fitColumns="true">
<thead>
<tr>
<th data-options="field:'id',width:50">序号</th>
<th data-options="field:'type',width:50">类型</th>
<th data-options="field:'name',width:50">名称</th>
<th data-options="field:'about',width:100">简介</th>
</tr>
</thead>
</table>
</body>
然后稍微调下样式：
.tool-box {
margin-bottom: 12px;
}
1
2
3
3. 点击新增后弹窗
注意新增绑定了btnAddClick方法，所以在此方法中可以操作弹窗。
<script>
function btnAddClick() {
$('#dialog-add').dialog('open');
}
</script>
1
2
3
4
5
解释下，执行btnAddClick方法后，id为dialog-add的弹窗将显示在页面上。
4. 弹窗代码编辑
我们根据需要开发下弹窗代码：
<!-- 新增弹窗 -->
<div id="dialog-add" class="easyui-dialog" title="新增" data-options="iconCls:'icon-ok',closed:'true'"
style="width: 600px; height: 400px; padding: 10px">
<table>
<tr>
<td>类型：</td>
<td>
<select id="add-type" class="easyui-combobox" style="width: 200px;">
<option value="award">奖学金</option>
<option value="help">助学金</option>
</select>
</td>
</tr>
<tr>
<td>名称：</td>
<td><input id="add-name" class="easyui-textbox" style="width: 200px"></td>
</tr>
<tr>
<td>简介：</td>
<td><input id="add-about" class="easyui-textbox" style="width: 200px"></td>
</tr>
<tr>
<td></td>
<td><a id="btn" onclick="btnAddSubmit()" href="#" class="easyui-linkbutton">保存</a></td>
</tr>
</table>
</div>
注意使用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);
}
},
});
}
6. 后台处理
后台处理就很简单了，接收前端输入的参数然后插入数据库就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("操作成功");
}
7. 测试
重启tomcat可进行测试验证，大功告成。 ![EasyUI+JavaWeb奖助学金管理系统[16]-权限管理功能的开发[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)