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;
}

3. 点击新增后弹窗

注意新增绑定了btnAddClick方法，所以在此方法中可以操作弹窗。

<script>
	function btnAddClick() {
		$('#dialog-add').dialog('open');
	}
</script>

解释下，执行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可进行测试验证，大功告成。