![EasyUI+JavaWeb奖助学金管理系统[14]-机构新增、编辑、删除的实现](http://www.mshxw.com/aiimages/31/236918.png "EasyUI+JavaWeb奖助学金管理系统[14]-机构新增、编辑、删除的实现")
之前已实现了机构的分页浏览，本章来实现下机构的新增、编辑、删除功能。
2. 新增功能的实现机构新增与之前的项目新增比较类似，但是需要注意的是，机构新增时需要选择新增机构的上级机构。所以在页面初始化时应加载结构列表信息到新增弹窗中。
2.1 添加新增弹窗代码如下，需要注意的是我们将表单输入框的id设置为add-xxx格式便于区分这是属于新增弹窗的输入框。
xxx部分可以设置为跟后端Depart类属性名字相同，便于对应。
类型：
名称：
上级机构：
保存
下面的代码实现了在页面初始化时，为新增弹窗的下拉框动态添加选项的功能。
// 初始化
$(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分别对应
我们既然使用了EasyUI，相关操作还是需要用框架提供的方法。
2.3 后端提供获取机构列表方法修改CoreServlet
// 获取机构列表
else if (method.equals("getDepartList")) {
DepartDao departDao = new DepartDao();
result.setCode(0);
result.setData(departDao.getAll());
}
在页面中增加方法：
// 新增点击
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);
}
},
});
}
修改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("操作成功");
}
我们在汉东大学下面新增一个学院，点击保存后效果如下：
编辑与新增差别不大，只是在打开编辑弹窗时，将编辑行的内容默认加载到弹窗中，此处不再讲解具体代码，需要的同学可以去我的Github查看。
4. 删除功能的实现点击删除后，将选中行的id传递到CoreServlet，执行删除后，前端重新加载数据表格即可。也比较简单没啥好讲的。
5. 总结从本章节开始，基础的操作已完成，后续我们重点讲解每个功能中比较不同的部分，相似部分大家可以直接查看我提交的源码。
