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. 总结
从本章节开始，基础的操作已完成，后续我们重点讲解每个功能中比较不同的部分，相似部分大家可以直接查看我提交的源码。
随时随地看视频
