EasyUI+JavaWeb奖助学金管理系统[14]-机构新增、编辑、删除的实现

  <!-- 新增弹窗 -->
  <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("操作成功");
    }