1. 本章任务
上一章已实现了弹窗新增项目的功能。本章节来实现下项目编辑与删除功能。
由于项目档案建立后,有可能有学生会申请相关项目,所以原则上项目档案是不允许删除的。
所以此处项目删除功能不需要开发。本章只需要开发编辑就可以了。项目编辑的意思是修改项目信息,例如项目名称填错了、项目简介想进行修改时,都可以对一个项目进行编辑。
2. 添加编辑按钮
在工具栏添加一个编辑按钮,并绑定js方法。
<div class="tool-box">
<a id="btn" onclick="btnAddClick()" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">新增</a>
<a id="btn" onclick="btnEditClick()" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">编辑</a>
</div>
3. 添加编辑弹窗
编辑后需要弹窗显示编辑内容,并提供保存按钮。
<!-- 编辑弹窗 --> <div id="dialog-edit" class="easyui-dialog" title="编辑" data-options="iconCls:'icon-ok',closed:'true'" style="width: 600px; height: 400px; padding: 10px"> <table> <tr> <td>编号:</td> <td><input id="edit-id" class="easyui-textbox" style="width: 200px" disabled></td> </tr> <tr> <td>类型:</td> <td> <select id="edit-type" class="easyui-combobox" style="width: 200px;"> <option value="award">奖学金</option> <option value="help">助学金</option> </select> </td> </tr> <tr> <td>名称:</td> <td><input id="edit-name" class="easyui-textbox" style="width: 200px"></td> </tr> <tr> <td>简介:</td> <td><input id="edit-about" class="easyui-textbox" style="width: 200px"></td> </tr> <tr> <td></td> <td><a id="btn" onclick="btnEditSubmit()" href="#" class="easyui-linkbutton">保存</a></td> </tr> </table> </div> 需要注意的是: 输入框的id都是以edit-开头,避免与新增弹窗add-开头重复。 编辑提交时需要根据id修改其他内容,所以编辑弹窗需要携带id信息,同时不允许修改。 4. 点击编辑后弹窗加载当前信息 点击编辑后,弹窗应该显示当前选中项目的信息。 // 编辑点击 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. 测试
非常完美哈。