上一章已实现了弹窗新增项目的功能。本章节来实现下项目编辑与删除功能。
由于项目档案建立后,有可能有学生会申请相关项目,所以原则上项目档案是不允许删除的。
所以此处项目删除功能不需要开发。本章只需要开发编辑就可以了。项目编辑的意思是修改项目信息,例如项目名称填错了、项目简介想进行修改时,都可以对一个项目进行编辑。
2. 添加编辑按钮在工具栏添加一个编辑按钮,并绑定js方法。
3. 添加编辑弹窗
编辑后需要弹窗显示编辑内容,并提供保存按钮。
编号:
类型:
名称:
简介:
保存
需要注意的是:
- 输入框的id都是以edit-开头,避免与新增弹窗add-开头重复。
- 编辑提交时需要根据id修改其他内容,所以编辑弹窗需要携带id信息,同时不允许修改。
点击编辑后,弹窗应该显示当前选中项目的信息。
// 编辑点击
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. 测试
非常完美哈。


![EasyUI+JavaWeb奖助学金管理系统[11]-编辑与删除项目的实现 EasyUI+JavaWeb奖助学金管理系统[11]-编辑与删除项目的实现](http://www.mshxw.com/aiimages/31/237015.png)
