EasyUI+JavaWeb奖助学金管理系统[10]-通过弹窗新增项目

深藏阁楼爱情的钟 2022-12-25 08:56 132阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 本章任务
 *  2. 添加新增按钮
 *  3. 点击新增后弹窗
 *  4. 弹窗代码编辑
 *  5. 提交新增内容
 *  6. 后台处理
 *  7. 测试

# 1. 本章任务 #

上一章已实现了项目信息的分页浏览，本章来实现新增项目的功能。为了方便用户使用，我们通过弹窗来实现项目信息的输入。最终达到如下效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center]

# 2. 添加新增按钮 #

在body中添加操作栏，并在操作栏中添加新增按钮

然后稍微调下样式：

.tool-box {
        
    	margin-bottom: 12px;
    }

# 3. 点击新增后弹窗 #

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

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

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/1069aba95d3e4caaaaf113e565ed3434.png