EasyUI+JavaWeb奖助学金管理系统[14]-机构新增、编辑、删除的实现

1. 本章任务

之前已实现了机构的分页浏览,本章来实现下机构的新增、编辑、删除功能。

2. 新增功能的实现

机构新增与之前的项目新增比较类似,但是需要注意的是,机构新增时需要选择新增机构的上级机构。所以在页面初始化时应加载结构列表信息到新增弹窗中。

2.1 添加新增弹窗

代码如下,需要注意的是我们将表单输入框的id设置为add-xxx格式便于区分这是属于新增弹窗的输入框。

xxx部分可以设置为跟后端Depart类属性名字相同,便于对应。

	<!-- 新增弹窗 -->
	<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="school">学校</option>
						<option value="college">学院</option>
						<option value="class">班级</option>
					</select></td>
			</tr>
			<tr>
				<td>名称:</td>
				<td><input id="add-name" class="easyui-textbox" style="width: 200px"></td>
			</tr>
			<tr>
				<td>上级机构:</td>
				<td><select id="add-parentId" class="easyui-combobox" style="width: 200px;">
						<option value="-1">请选择</option>
					</select></td>
			</tr>
			<tr>
				<td></td>
				<td><a id="btn" onclick="btnAddSubmit()" href="#" class="easyui-linkbutton">保存</a></td>
			</tr>
		</table>
	</div>

2.2 页面初始化时加载上级机构列表

下面的代码实现了在页面初始化时,为新增弹窗的下拉框动态添加选项的功能。

	// 初始化
	$(function () {
		loadDeparts();
	});
	// 加载上级机构
	function loadDeparts() {
		$.ajax({
			url: "CoreServlet?method=getDepartList",
			type: "post",
			dataType: "json",
			data: null,
			success: function (res) {
				console.log(res);
				if (res.code == 0) {
					// 为指定下拉框增加选项
					addItemsForSelect("#add-parentId", res.data);
				} else {//提示错误信息
					alert(res.msg);
				}
			},
		});
	}
	// 为下拉框增加选项
	function addItemsForSelect(id, data) {
		// 清空选项
		$(id).combobox("clear");
		// 动态添加的选项
		var items = [{
			"value": "-1",
			"text": "请选择"
		}];
		$.each(data, function (i, v) {//遍历返回值
			items.push({
				"value": v.id,
				"text": v.name
			});
		});
		// 加载数据
		$(id).combobox("loadData", items);
		// 设置默认选中值
		$(id).combobox("setValue", "-1");
	}

注意$(id).combobox("clear");可以清空下拉框中的选项。$(id).combobox("loadData", items);可以加载items数组中的数据,数组中的value和text分别对应<option>标签的值和显示文本。最后,$(id).combobox("setValue", "-1");可以设置默认选中项的值,所以新增弹窗中,“请选择”会被默认选中。

我们既然使用了EasyUI,相关操作还是需要用框架提供的方法。

2.3 后端提供获取机构列表方法

修改CoreServlet

		// 获取机构列表
		else if (method.equals("getDepartList")) {
			DepartDao departDao = new DepartDao();
			result.setCode(0);
			result.setData(departDao.getAll());
		}

2.4 点击保存后将内容提交

在页面中增加方法:

	// 新增点击
	function btnAddClick() {
		$('#dialog-add').dialog('open');
	}
	// 新增保存
	function btnAddSubmit() {
		var param = {
			type: $("#add-type").val(),
			name: $("#add-name").val(),
			parentId: $("#add-select-depart").val(),
		}
		$.ajax({
			url: "CoreServlet?method=addDepart",
			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);
				}
			},
		});
	}

2.5 后端处理新增保存请求

修改CoreServlet

		// 新增机构保存
		else if (method.equals("addDepart")) {
			DepartDao departDao = new DepartDao();
			Depart depart = new Depart();
			depart.setType(request.getParameter("type"));
			depart.setName(request.getParameter("name"));
			depart.setParentId(request.getParameter("parentId"));
			departDao.insert(depart);
			result.setCode(0);
			result.setMsg("操作成功");
		}

2.6 测试

我们在汉东大学下面新增一个学院,点击保存后效果如下:
在这里插入图片描述

3. 编辑功能的实现

编辑与新增差别不大,只是在打开编辑弹窗时,将编辑行的内容默认加载到弹窗中,此处不再讲解具体代码,需要的同学可以去我的Github查看。

4. 删除功能的实现

点击删除后,将选中行的id传递到CoreServlet,执行删除后,前端重新加载数据表格即可。也比较简单没啥好讲的。

5. 总结

从本章节开始,基础的操作已完成,后续我们重点讲解每个功能中比较不同的部分,相似部分大家可以直接查看我提交的源码。


如有问题请扫码联系我
在这里插入图片描述

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页