1. 本章任务

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

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

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

2. 添加编辑按钮

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

	<div class="tool-box">
		<a id="btn" onclick="btnAddClick()" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">新增</a>
		<a id="btn" onclick="btnEditClick()" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">编辑</a>
	</div>

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>

需要注意的是：

输入框的id都是以edit-开头，避免与新增弹窗add-开头重复。
编辑提交时需要根据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. 测试

非常完美哈。
在这里插入图片描述