EasyUI+JavaWeb奖助学金管理系统[15]-人员管理功能实现

/**
 * 用户
 */
public class User {
  private String id;
  private String userName;
  private String loginName;
  private String password;
  private String role;
  private String departId;
  /**
   * 冗余查询字段
   */
  private String departName;
  // 省略get set
}
EasyUI数据表格显示时，直接使用departName字段即可。
    <table id="mainTable" title="人员列表" class="easyui-datagrid" url="CoreServlet?method=getUserPage" pagination="true"
     singleSelect="true" fitColumns="true">
      <thead>
        <tr>
          <th data-options="field:'id',width:50">序号</th>
          <th data-options="field:'userName',width:50">姓名</th>
          <th data-options="field:'loginName',width:50">登录名</th>
          <th data-options="field:'role',width:50" formatter="formatRole">角色</th>
          <th data-options="field:'departName',width:100">所属机构</th>
        </tr>
      </thead>
    </table>
此时由于数据库中存储的角色是英文字符串，需要通过格式化方法转化为中文，即formatRole方法。
    // 格式化类型
    function formatRole(val, row) {
      if (val == "schoolmaster") {
        return "学校管理员";
      } else if (val == "collegemaster") {
        return "学院管理员";
      } else if (val == "classmaster") {
        return "班主任";
      } else {
        return "学生";
      }
    }
最后，数据库操作层要实现联表查询，修改UserDao如下。
  /**
   * 获取数量
   */
  public int getCount() throws Exception {
    Connection conn = ConnectionUtils.getConnection();
    String sql = "select count(id) from user ";
    QueryRunner runner = new QueryRunner();
    Number number = (Number) runner.query(conn, sql, new ScalarHandler());
    int value = number.intValue();
    ConnectionUtils.releaseConnection(conn);
    return value;
  }
  /**
   * 分页查询
   */
  public List<User> getPage(int page, int rows) throws Exception {
    Connection conn = ConnectionUtils.getConnection();
    String sql = "select u.*,d.name as departName from user u left join depart d on u.departId=d.id limit ?,?";
    QueryRunner runner = new QueryRunner();
    Object[] params = { (page - 1) * rows, rows };
    List<User> users = runner.query(conn, sql, new BeanListHandler<User>(User.class), params);
    ConnectionUtils.releaseConnection(conn);
    return users;
  }

  <!-- 新增弹窗 -->
  <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><input id="add-userName" class="easyui-textbox" style="width: 200px"></td>
      </tr>
      <tr>
        <td>登录名：</td>
        <td><input id="add-loginName" class="easyui-textbox" style="width: 200px"></td>
      </tr>
      <tr>
        <td>角色：</td>
        <td><select id="add-role" class="easyui-combobox" style="width: 200px;">
            <option value="schoolmaster">学校管理员</option>
            <option value="collegemaster">学院管理员</option>
            <option value="classmaster">班主任</option>
            <option value="student">学生</option>
          </select></td>
      </tr>
      <tr>
        <td>所属机构：</td>
        <td><select id="add-departId" class="easyui-combobox" style="width: 200px;">
          </select></td>
      </tr>
      <tr>
        <td></td>
        <td><a id="btn" onclick="btnAddSubmit()" href="#" class="easyui-linkbutton">保存</a></td>
      </tr>
    </table>
  </div>
然后在页面初始化时，从数据库中获取机构信息，将加载到所属机构的下拉框add-departId中。
    // 初始化
    $(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-departId", res.data);
            addItemsForSelect("#edit-departId", res.data);
          } else { //提示错误信息
            alert(res.msg);
          }
        },
      });
    }
    // 为下拉框增加选项
    function addItemsForSelect(id, data) {
      // 清空选项
      $(id).combobox("clear");
      var items = [];
      // 动态添加的选项
      $.each(data, function(i, v) { //遍历返回值
        items.push({
          "value": v.id,
          "text": v.name
        });
      });
      // 加载数据
      $(id).combobox("loadData", items);
      // 设置默认选中值
      $(id).combobox("setValue", items[0].value);
    }
其他的保存就跟之前的项目、机构管理类似了，此处不再详述。需要注意新增用户时，可以将其密码设置为默认123456，用户登录后自行修改即可。
3. 人员编辑功能的实现
需要注意编辑人员时，人员的所属机构同样是从数据库中获取的，所以在上面代码中会有如下代码，即同时为新增弹窗、编辑弹窗的机构下拉框增加机构列表选项。
addItemsForSelect("#add-departId", res.data);
addItemsForSelect("#edit-departId", res.data);

    // 删除
    function btnRemoveClick() {
      // 获取当前选中行
      var row = $('#mainTable').datagrid('getSelected');
      if (row == null) {
        alert("请选择要删除的行");
        return;
      }
      // 提示用户确认
      $.messager.confirm('确认?', '您确认删除吗?', function(r) {
        if (r) { //用户选择确认
          $.ajax({
            url: "CoreServlet?method=removeUser",
            type: "post",
            dataType: "json",
            data: {
              id: row.id
            },
            success: function(res) {
              console.log(res);
              if (res.code == 0) { //成功则刷新表格
                $('#mainTable').datagrid('reload');
              } else { //提示错误信息
                alert(res.msg);
              }
            },
          });
        }
      });
    }
后台添加对应删除方法即可：
    // 删除用户
    else if (method.equals("removeUser")) {
      UserDao userDao = new UserDao();
      userDao.deleteById(request.getParameter("id"));
      result.setCode(0);
      result.setMsg("操作成功");
    }
5. 本章完整源代码
为了方便大家学习，贴上本章完整源码。
5.1 userManager.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
  </head>
  <body>
    <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> <a
       id="btn" onclick="btnRemoveClick()" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除</a>
    </div>
    <table id="mainTable" title="人员列表" class="easyui-datagrid" url="CoreServlet?method=getUserPage" pagination="true"
     singleSelect="true" fitColumns="true">
      <thead>
        <tr>
          <th data-options="field:'id',width:50">序号</th>
          <th data-options="field:'userName',width:50">姓名</th>
          <th data-options="field:'loginName',width:50">登录名</th>
          <th data-options="field:'role',width:50" formatter="formatRole">角色</th>
          <th data-options="field:'departName',width:100">所属机构</th>
        </tr>
      </thead>
    </table>
    <!-- 新增弹窗 -->
    <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><input id="add-userName" class="easyui-textbox" style="width: 200px"></td>
        </tr>
        <tr>
          <td>登录名：</td>
          <td><input id="add-loginName" class="easyui-textbox" style="width: 200px"></td>
        </tr>
        <tr>
          <td>角色：</td>
          <td><select id="add-role" class="easyui-combobox" style="width: 200px;">
              <option value="schoolmaster">学校管理员</option>
              <option value="collegemaster">学院管理员</option>
              <option value="classmaster">班主任</option>
              <option value="student">学生</option>
            </select></td>
        </tr>
        <tr>
          <td>所属机构：</td>
          <td><select id="add-departId" class="easyui-combobox" style="width: 200px;">
            </select></td>
        </tr>
        <tr>
          <td></td>
          <td><a id="btn" onclick="btnAddSubmit()" href="#" class="easyui-linkbutton">保存</a></td>
        </tr>
      </table>
    </div>
    <!-- 编辑弹窗 -->
    <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><input id="edit-userName" class="easyui-textbox" style="width: 200px"></td>
        </tr>
        <tr>
          <td>登录名：</td>
          <td><input id="edit-loginName" class="easyui-textbox" style="width: 200px"></td>
        </tr>
        <tr>
          <td>角色：</td>
          <td><select id="edit-role" class="easyui-combobox" style="width: 200px;">
              <option value="schoolmaster">学校管理员</option>
              <option value="collegemaster">学院管理员</option>
              <option value="classmaster">班主任</option>
              <option value="student">学生</option>
            </select></td>
        </tr>
        <tr>
          <td>所属机构：</td>
          <td><select id="edit-departId" class="easyui-combobox" style="width: 200px;">
            </select></td>
        </tr>
        <tr>
          <td></td>
          <td><a id="btn" onclick="btnEditSubmit()" href="#" class="easyui-linkbutton">保存</a></td>
        </tr>
      </table>
    </div>
  </body>
  <script>
    // 初始化
    $(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-departId", res.data);
            addItemsForSelect("#edit-departId", res.data);
          } else { //提示错误信息
            alert(res.msg);
          }
        },
      });
    }
    // 为下拉框增加选项
    function addItemsForSelect(id, data) {
      // 清空选项
      $(id).combobox("clear");
      var items = [];
      // 动态添加的选项
      $.each(data, function(i, v) { //遍历返回值
        items.push({
          "value": v.id,
          "text": v.name
        });
      });
      // 加载数据
      $(id).combobox("loadData", items);
      // 设置默认选中值
      $(id).combobox("setValue", items[0].value);
    }
    // 新增点击
    function btnAddClick() {
      $('#dialog-add').dialog('open');
    }
    // 新增保存
    function btnAddSubmit() {
      var param = {
        userName: $("#add-userName").val(),
        loginName: $("#add-loginName").val(),
        role: $("#add-role").combobox("getValue"), //获取选中项的值
        departId: $("#add-departId").combobox("getValue"), //获取选中项的值
      }
      $.ajax({
        url: "CoreServlet?method=addUser",
        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);
          }
        },
      });
    }
    // 编辑点击
    function btnEditClick() {
      // 获取当前选中行
      var row = $('#mainTable').datagrid('getSelected');
      if (row == null) {
        alert("请选择要修改的行");
        return;
      }
      // 将选中行信息设置到弹窗 
      $("#edit-id").textbox("setValue", row.id);
      $("#edit-userName").textbox("setValue", row.userName);
      $("#edit-loginName").textbox("setValue", row.loginName);
      $("#edit-role").combobox("setValue", row.role);
      $("#edit-departId").combobox("setValue", row.departId);
      $('#dialog-edit').dialog('open');
    }
    // 编辑保存
    function btnEditSubmit() {
      var param = {
        id: $("#edit-id").val(),
        userName: $("#edit-userName").val(),
        loginName: $("#edit-loginName").val(),
        role: $("#edit-role").combobox("getValue"),
        departId: $("#edit-departId").combobox("getValue"),
      }
      $.ajax({
        url: "CoreServlet?method=editUser",
        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);
          }
        },
      });
    }
    // 格式化类型
    function formatRole(val, row) {
      if (val == "schoolmaster") {
        return "学校管理员";
      } else if (val == "collegemaster") {
        return "学院管理员";
      } else if (val == "classmaster") {
        return "班主任";
      } else {
        return "学生";
      }
    }
    // 删除
    function btnRemoveClick() {
      // 获取当前选中行
      var row = $('#mainTable').datagrid('getSelected');
      if (row == null) {
        alert("请选择要删除的行");
        return;
      }
      // 提示用户确认
      $.messager.confirm('确认?', '您确认删除吗?', function(r) {
        if (r) { //用户选择确认
          $.ajax({
            url: "CoreServlet?method=removeUser",
            type: "post",
            dataType: "json",
            data: {
              id: row.id
            },
            success: function(res) {
              console.log(res);
              if (res.code == 0) { //成功则刷新表格
                $('#mainTable').datagrid('reload');
              } else { //提示错误信息
                alert(res.msg);
              }
            },
          });
        }
      });
    }
  </script>
</html>
5.2 CoreServlet.java
@WebServlet("/CoreServlet")
public class CoreServlet extends HttpServlet {
  public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // 设置输入输出格式、编码
    response.setContentType("text/html");
    request.setCharacterEncoding("utf-8");
    response.setCharacterEncoding("utf-8");
    PrintWriter out = response.getWriter(); // 获取writer方法，用于将数据返回给ajax
    // 获取用户在网页输入的用户名和密码
    Result result = null;
    try {
      result = handleRequest(request);
    } catch (Exception ex) {
      result = new Result();
      result.setCode(9999);
      result.setMsg(ex.getMessage());
      System.err.println(ex.getMessage());
    } finally {
      out.write(JSON.toJSONString(result));
      out.flush();
      out.close();
    }
  }
  /**
   * 具体处理请求
   */
  public Result handleRequest(HttpServletRequest request) throws Exception {
    Result result = new Result();
    String method = request.getParameter("method");
    // 如果未登录，且不是请求的登录方法，直接抛出异常
    User loginUser = (User) request.getSession().getAttribute("loginUser");
    if (loginUser == null && !method.equals("login")) {
      throw new Exception("未登录！");
    }
    // 请求页码、每页显示行数、总数
    int page = 1, rows = 10, total = 0;
    if (method.contains("Page") == true) {// 当前为分页请求
      // 获取
      String inputPage = request.getParameter("page");
      String inputRows = request.getParameter("rows");
      page = (inputPage == null) ? 1 : Integer.parseInt(inputPage);
      rows = (inputRows == null) ? 10 : Integer.parseInt(inputRows);
    }
    // 登录处理
    if (method.equals("login")) {
      String loginName = request.getParameter("loginName");
      String password = request.getParameter("password");
      UserDao userDao = new UserDao();
      List<User> users = userDao.getUsersByLoginNameAndPassword(loginName, password);
      if (users != null && users.size() == 1) {// 登录成功
        result.setCode(0);
        result.setMsg("操作成功");
        result.setData(users.get(0));
        request.getSession().setAttribute("loginUser", users.get(0));
      } else {// 登录失败
        result.setCode(9999);
        result.setMsg("操作失败");
      }
    }
    // 查询登录用户拥有的菜单
    else if (method.equals("getMenusOfUser")) {
      MenuDao menuDao = new MenuDao();
      result.setData(menuDao.getMenusOfUser(loginUser));// 返回数据为对应菜单
      result.setCode(0);
      result.setMsg("操作成功");
    }
    // 获取项目分页
    else if (method.equals("getProjectPage")) {
      ProjectDao projectDao = new ProjectDao();
      total = projectDao.getCount();
      result.setTotal(total);
      result.setRows(projectDao.getPage(page, rows));
    }
    // 新增项目保存
    else if (method.equals("addProject")) {
      ProjectDao projectDao = new ProjectDao();
      Project project = new Project();
      project.setType(request.getParameter("type"));
      project.setName(request.getParameter("name"));
      project.setAbout(request.getParameter("about"));
      projectDao.insert(project);
      result.setCode(0);
      result.setMsg("操作成功");
    }
    // 编辑项目保存
    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("操作成功");
    }
    // 获取机构列表
    else if (method.equals("getDepartList")) {
      DepartDao departDao = new DepartDao();
      result.setCode(0);
      result.setData(departDao.getAll());
    }
    // 获取机构分页
    else if (method.equals("getDepartPage")) {
      DepartDao departDao = new DepartDao();
      total = departDao.getCount();
      result.setTotal(total);
      result.setRows(departDao.getPage(page, rows));
    }
    // 新增机构保存
    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("操作成功");
    }
    // 编辑机构保存
    else if (method.equals("editDepart")) {
      DepartDao departDao = new DepartDao();
      Depart depart = new Depart();
      depart.setId(request.getParameter("id"));
      depart.setType(request.getParameter("type"));
      depart.setName(request.getParameter("name"));
      depart.setParentId(request.getParameter("parentId"));
      departDao.update(depart);
      result.setCode(0);
      result.setMsg("操作成功");
    }
    // 获取人员分页
    else if (method.equals("getUserPage")) {
      UserDao userDao = new UserDao();
      total = userDao.getCount();
      result.setTotal(total);
      result.setRows(userDao.getPage(page, rows));
    }
    // 新增人员保存
    else if (method.equals("addUser")) {
      UserDao userDao = new UserDao();
      User user = new User();
      user.setUserName(request.getParameter("userName"));
      user.setLoginName(request.getParameter("loginName"));
      user.setRole(request.getParameter("role"));
      user.setDepartId(request.getParameter("departId"));
      user.setPassword("123456");
      userDao.insert(user);
      result.setCode(0);
      result.setMsg("操作成功");
    }
    // 编辑人员保存
    else if (method.equals("editUser")) {
      UserDao userDao = new UserDao();
      User user = new User();
      user.setId(request.getParameter("id"));
      user.setUserName(request.getParameter("userName"));
      user.setLoginName(request.getParameter("loginName"));
      user.setRole(request.getParameter("role"));
      user.setDepartId(request.getParameter("departId"));
      userDao.update(user);
      result.setCode(0);
      result.setMsg("操作成功");
    }
    // 删除用户
    else if (method.equals("removeUser")) {
      UserDao userDao = new UserDao();
      userDao.deleteById(request.getParameter("id"));
      result.setCode(0);
      result.setMsg("操作成功");
    }
    return result;
  }
}
5.3 UserDao.java
/**
 * 用户数据访问类
 */
public class UserDao {
  /**
   * 通过登录名、密码获取用户
   */
  public List<User> getUsersByLoginNameAndPassword(String loginName, String password) throws SQLException {
    Connection conn = ConnectionUtils.getConnection();
    String sql = "select * from user where loginName=? and password=?";
    QueryRunner runner = new QueryRunner();
    Object[] params = { loginName, password };
    List<User> users = runner.query(conn, sql, new BeanListHandler<User>(User.class), params);
    ConnectionUtils.releaseConnection(conn);
    return users;
  }
  /**
   * 新增
   */
  public void insert(User user) throws Exception {
    Connection conn = ConnectionUtils.getConnection();
    String sql = "insert into user(userName,loginName,password,role,departId)values(?,?,?,?,?)";
    Object[] params = { user.getUserName(), user.getLoginName(), user.getPassword(), user.getRole(), user.getDepartId() };
    QueryRunner runner = new QueryRunner();
    runner.update(conn, sql, params);
    ConnectionUtils.releaseConnection(conn);
  }
  /**
   * 移除
   */
  public void deleteById(String id) throws Exception {
    Connection conn = ConnectionUtils.getConnection();
    String sql = "delete from user where id =?";
    Object[] params = { id };
    QueryRunner runner = new QueryRunner();
    runner.update(conn, sql, params);
    ConnectionUtils.releaseConnection(conn);
  }
  /**
   * 更新
   */
  public void update(User user) throws Exception {
    Connection conn = ConnectionUtils.getConnection();
    String sql = "update user set userName=?,loginName=?,password=?,role=?,departId=? where id =?";
    Object[] params = { user.getUserName(), user.getLoginName(), user.getPassword(), user.getRole(), user.getDepartId(), user.getId() };
    QueryRunner runner = new QueryRunner();
    runner.update(conn, sql, params);
    ConnectionUtils.releaseConnection(conn);
  }
  /**
   * 获取一个
   */
  public User getById(String id) throws Exception {
    Connection conn = ConnectionUtils.getConnection();
    String sql = "select * from user where id =?";
    Object[] params = { id };
    QueryRunner runner = new QueryRunner();
    User user = (User) runner.query(conn, sql, new BeanHandler<User>(User.class), params);
    ConnectionUtils.releaseConnection(conn);
    return user;
  }
  /**
   * 获取全部
   */
  public List<User> getAll() throws Exception {
    Connection conn = ConnectionUtils.getConnection();
    String sql = "select * from user ";
    QueryRunner runner = new QueryRunner();
    List<User> users = runner.query(conn, sql, new BeanListHandler<User>(User.class));
    ConnectionUtils.releaseConnection(conn);
    return users;
  }
  /**
   * 获取数量
   */
  public int getCount() throws Exception {
    Connection conn = ConnectionUtils.getConnection();
    String sql = "select count(id) from user ";
    QueryRunner runner = new QueryRunner();
    Number number = (Number) runner.query(conn, sql, new ScalarHandler());
    int value = number.intValue();
    ConnectionUtils.releaseConnection(conn);
    return value;
  }
  /**
   * 分页查询
   */
  public List<User> getPage(int page, int rows) throws Exception {
    Connection conn = ConnectionUtils.getConnection();
    String sql = "select u.*,d.name as departName from user u left join depart d on u.departId=d.id limit ?,?";
    QueryRunner runner = new QueryRunner();
    Object[] params = { (page - 1) * rows, rows };
    List<User> users = runner.query(conn, sql, new BeanListHandler<User>(User.class), params);
    ConnectionUtils.releaseConnection(conn);
    return users;
  }
}
6. 总结
万变不离其宗，都是套路。
界面写的多了，自然就知道如何应对新功能。
稳得很。