EasyUI+JavaWeb奖助学金管理系统[11]-编辑与删除项目的实现

简介: 本文目录1. 本章任务2. 添加编辑按钮3. 添加编辑弹窗4. 点击编辑后弹窗加载当前信息5. 点击保存后提交表单6. 后端执行编辑保存7. 测试

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

非常完美哈。

image.png


相关文章
|
4天前
基于EasyUI的后台管理系统页面原型_示例图_下载地址
基于EasyUI的后台管理系统页面原型_示例图_下载地址
5 0
|
7月前
Easyui datagrid 编辑结束时combobox显示value而不显示text
Easyui datagrid 编辑结束时combobox显示value而不显示text
|
7月前
EasyUI DataGrid 可编辑列级联操作
EasyUI DataGrid 可编辑列级联操作
|
7月前
easyUI datagarid 编辑状态下的combobox动态赋值
easyUI datagarid 编辑状态下的combobox动态赋值
|
7月前
EasyUI可编辑列
EasyUI可编辑列
|
8月前
|
前端开发 容器
04EasyUI 应用- 创建展开行明细编辑表单的 CRUD 应用
04EasyUI 应用- 创建展开行明细编辑表单的 CRUD 应用
34 0
|
11月前
|
数据可视化 安全 Java
【项目源码】基于spring boot+mybatis+easyui开发的质量溯源系统
粮油溯源系统是从种植到加工、包装、库存、物流、销售、售出、异常反馈的全流程可视化质量溯源系统。技术架构:spring boot+mybatis+easyui+mysql
【项目源码】基于spring boot+mybatis+easyui开发的质量溯源系统
|
前端开发 JavaScript Java
【Java框架型项目从入门到装逼】第八节 - 用EasyUI绘制主界面
【Java框架型项目从入门到装逼】第八节 - 用EasyUI绘制主界面
101 0
|
存储 关系型数据库 MySQL
Easyui datagrid combobox输入框下拉(取消)选值和编辑已选值处理
Easyui datagrid combobox输入框下拉(取消)选值和编辑已选值处理
361 0
|
安全 数据安全/隐私保护
EasyUI+JavaWeb奖助学金管理系统[20]-项目总结与展望
本文目录 1. 总结 1.1 管理员新增奖助学金项目 1.2 学生发起申请 1.3 班主任审批 1.4 学院管理员审批 1.5 学校管理员审批 1.6 学生查看申请结果 2. 展望
153 0
EasyUI+JavaWeb奖助学金管理系统[20]-项目总结与展望

热门文章

最新文章