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

- 日理万妓 2022-12-27 08:30 155阅读 0赞

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

### 本文目录 ###

*  1. 本章任务
 *  2. 新增功能的实现
 *   *  2.1 添加新增弹窗
     *  2.2 页面初始化时加载上级机构列表
     *  2.3 后端提供获取机构列表方法
     *  2.4 点击保存后将内容提交
     *  2.5 后端处理新增保存请求
     *  2.6 测试
 *  3. 编辑功能的实现
 *  4. 删除功能的实现
 *  5. 总结

# 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 测试 ##

我们在汉东大学下面新增一个学院，点击保存后效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center]

# 3. 编辑功能的实现 #

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

# 4. 删除功能的实现 #

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

# 5. 总结 #

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

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