EasyUI+JavaWeb奖助学金管理系统[11]-编辑与删除项目的实现

深藏阁楼爱情的钟 2022-12-25 14:59 127阅读 0赞

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

### 本文目录 ###

*  1. 本章任务
 *  2. 添加编辑按钮
 *  3. 添加编辑弹窗
 *  4. 点击编辑后弹窗加载当前信息
 *  5. 点击保存后提交表单
 *  6. 后端执行编辑保存
 *  7. 测试

# 1. 本章任务 #

上一章已实现了弹窗新增项目的功能。本章节来实现下项目编辑与删除功能。

由于项目档案建立后，有可能有学生会申请相关项目，所以原则上项目档案是不允许删除的。

所以此处项目删除功能不需要开发。本章只需要开发编辑就可以了。项目编辑的意思是修改项目信息，例如项目名称填错了、项目简介想进行修改时，都可以对一个项目进行编辑。

# 2. 添加编辑按钮 #

在工具栏添加一个编辑按钮，并绑定js方法。

# 3. 添加编辑弹窗 #

编辑后需要弹窗显示编辑内容，并提供保存按钮。

<div id="dialog-edit" class="easyui-dialog" title="编辑" data-options="iconCls:'icon-ok',closed:'true'"
    		style="width: 600px; height: 400px; padding: 10px">
    		<table>
    			<tr>
    				<td>编号：</td>
    				<td><input id="edit-id" class="easyui-textbox" style="width: 200px" disabled></td>
    			</tr>
    			<tr>
    				<td>类型：</td>
    				<td>
    					<select id="edit-type" class="easyui-combobox" style="width: 200px;">
    						<option value="award">奖学金</option>
    						<option value="help">助学金</option>
    					</select>
    				</td>
    			</tr>
    			<tr>
    				<td>名称：</td>
    				<td><input id="edit-name" class="easyui-textbox" style="width: 200px"></td>
    			</tr>
    			<tr>
    				<td>简介：</td>
    				<td><input id="edit-about" class="easyui-textbox" style="width: 200px"></td>
    			</tr>
    			<tr>
    				<td></td>
    				<td><a id="btn" onclick="btnEditSubmit()" href="#" class="easyui-linkbutton">保存</a></td>
    			</tr>
    		</table>
    	</div>

需要注意的是：

1.  输入框的id都是以edit-开头，避免与新增弹窗add-开头重复。
2.  编辑提交时需要根据id修改其他内容，所以编辑弹窗需要携带id信息，同时不允许修改。

# 4. 点击编辑后弹窗加载当前信息 #

点击编辑后，弹窗应该显示当前选中项目的信息。

// 编辑点击
    	function btnEditClick() {
        
    		// 获取当前选中行
    		var row = $('#mainTable').datagrid('getSelected');
    		if (row == null) {
        
    			alert("请选择要修改的行");
    			return;
    		}
    		// 将选中行信息设置到弹窗 
    		$("#edit-id").textbox("setValue", row.id);
    		$("#edit-type").combobox("setValue", row.type);
    		$("#edit-name").textbox("setValue", row.name);
    		$("#edit-about").textbox("setValue", row.about);
    		$('#dialog-edit').dialog('open');
    	}

需要注意的是，使用easyui后，对easyui组件进行操作最好遵循easyui的规范，例如对文本框要使用`.textbox("setValue", row.id)`为其设置value，对下拉框要使用`.combobox("setValue", row.type)`为其设置value。

# 5. 点击保存后提交表单 #

其实编辑和新增的提交表单基本是一样，只是编辑要多提交一个id信息。

// 编辑保存
    	function btnEditSubmit() {
        
    		var param = {
        
    			id: $("#edit-id").val(),
    			type: $("#edit-type").val(),
    			name: $("#edit-name").val(),
    			about: $("#edit-about").val(),
    		}
    		$.ajax({
        
    			url: "CoreServlet?method=editProject",
    			type: "post",
    			dataType: "json",
    			data: param,
    			success: function (res) {
        
    				console.log(res);
    				if (res.code == 0) {
        //成功则刷新表格
    					$('#mainTable').datagrid('reload');
    					$('#dialog-edit').dialog('close');
    				} else {
        //提示错误信息
    					alert(res.msg);
    				}
    			},
    		});
    	}

# 6. 后端执行编辑保存 #

修改CoreServlet添加方法即可。

// 编辑项目保存
    		else if (method.equals("editProject")) {
        
    			ProjectDao projectDao = new ProjectDao();
    			Project project = new Project();
    			project.setId(request.getParameter("id"));
    			project.setType(request.getParameter("type"));
    			project.setName(request.getParameter("name"));
    			project.setAbout(request.getParameter("about"));
    			projectDao.update(project);
    			result.setCode(0);
    			result.setMsg("操作成功");
    		}

# 7. 测试 #

非常完美哈。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center]

[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/2bbd95c390254a1094fe29d317cc9b98.png