MVC 整合 EasyUI Datagrid 實現分頁查詢與 CRUD 操作

MVC 整合 EasyUI Datagrid 實現分頁查詢與 CRUD 操作

本文示範以傳統 MVC 架構（Servlet + DAO + Service）整合 jQuery EasyUI Datagrid，實現學生資料的分頁顯示、新增、刪除、修改功能，後端回傳標準 JSON 格式供前端渲染。

資料庫設計

• teacher：tid (PK), tname, tpsw
• student：sid (PK), sname, sage, tid (FK 關聯 teacher)

場景：教師登入後，僅顯示該教師名下的學生資料。

後端分層實作

1. 實體類

// Student.java
public class Student {
    private int sid; private String sname, sage;
    // getter/setter/建構子略
}
// Teacher.java 同前文

2. DAO 介面與實作

// StudentDao.java
public interface StudentDao {
    List getStudentByTid(int tid, int start, int pageSize);
    int getStudentCountByTid(int tid);
    boolean deleteStudents(String[] sids);
    boolean updateStudent(int sid, String sname, String sage);
    boolean addStudent(String sname, String sage, int tid);
}

// StudentDaoImpl.java 關鍵片段
public List getStudentByTid(int tid, int start, int pageSize) {
    List list = new ArrayList<>();
    String sql = "SELECT sid,sname,sage FROM student WHERE tid=? LIMIT ?,?";
    try (Connection con = JDBCUtil.getConnection();
         PreparedStatement ps = con.prepareStatement(sql)) {
        ps.setInt(1, tid);
        ps.setInt(2, start);
        ps.setInt(3, pageSize);
        ResultSet rs = ps.executeQuery();
        while (rs.next()) {
            Student s = new Student();
            s.setSid(rs.getInt("sid"));
            s.setSname(rs.getString("sname"));
            s.setSage(rs.getString("sage"));
            list.add(s);
        }
    } catch (SQLException e) { e.printStackTrace(); }
    return list;
}

public int getStudentCountByTid(int tid) {
    String sql = "SELECT COUNT(*) AS scount FROM student WHERE tid=?";
    // ... 執行查詢回傳 scount
}

3. Service 層

// searchService.java
public interface SearchService {
    List getStudents(int tid, int start, int pageSize);
    int getStudentCount(int tid);
}

// SearchServiceImpl.java
public class SearchServiceImpl implements SearchService {
    private StudentDao dao = new StudentDaoImpl();
    public List getStudents(int tid, int start, int pageSize) {
        return dao.getStudentByTid(tid, start, pageSize);
    }
    public int getStudentCount(int tid) { return dao.getStudentCountByTid(tid); }
}

4. Controller 回傳 JSON

// SearchController.java
@WebServlet("/selectStus")
public class SearchController extends HttpServlet {
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("application/json;charset=UTF-8");

        int page = Integer.parseInt(req.getParameter("page"));   // EasyUI 當前頁
        int rows = Integer.parseInt(req.getParameter("rows"));   // 每頁筆數
        int start = (page - 1) * rows;

        Teacher teacher = (Teacher) req.getSession().getAttribute("teacher");
        int tid = teacher.getTid();

        SearchService svc = new SearchServiceImpl();
        int total = svc.getStudentCount(tid);
        List students = svc.getStudents(tid, start, rows);

        JSONObject json = new JSONObject();
        json.put("total", total);
        json.put("rows", JSONArray.fromObject(students));
        json.put("page", start); // 非標準欄位，視前端需求

        resp.getWriter().write(json.toString());
    }
}

前端 main.jsp 整合 EasyUI

<%@ taglib prefix="c" uri="https://java.sun.com/jsp/jstl/core" %>
<html>
<head>
  <link href="themes/bootstrap/easyui.css" rel="stylesheet">
  <link href="themes/icon.css" rel="stylesheet">
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery.easyui.min.js"></script>
  <script src="js/easyui-lang-zh_CN.js"></script>
</head>
<body>
  <input id="searchStu" class="easyui-searchbox" data-options="prompt:'輸入學生查詢',width:150">
  <table id="students"></table>

  <script>
  $(function(){
    $('#students').datagrid({
      url: '${pageContext.request.contextPath}/selectStus',
      columns: [[
        {field:'checked', checkbox:true},
        {field:'sid', title:'ID', width:100},
        {field:'sname', title:'姓名', width:100},
        {field:'sage', title:'年齡', width:100, align:'right'}
      ]],
      pagination: true,
      pagePosition: 'bottom',
      toolbar: [{
        iconCls:'icon-add', text:'新增',
        handler: function(){ $('#addStu').dialog('open'); }
      },'-',{
        iconCls:'icon-remove', text:'刪除',
        handler: function(){
          var rows = $('#students').datagrid('getSelections');
          if (!rows.length) { $.messager.alert('提示','請選擇資料'); return; }
          var ids = rows.map(r => r.sid).join(',');
          $.messager.confirm('確認','確定刪除?', function(r){
            if (r) {
              $.post('deleteStus', {sids:ids}, function(data){
                if (data=="1") { $('#students').datagrid('reload'); }
                else $.messager.alert('失敗','刪除失敗');
              });
            }
          });
        }
      },'-',{
        iconCls:'icon-edit', text:'修改',
        handler: function(){
          var rows = $('#students').datagrid('getSelections');
          if (rows.length != 1) { $.messager.alert('提示','請選擇單筆'); return; }
          $('#updateStu').dialog('open');
          $('#upStu').form('load', rows[0]);
        }
      }]
    });

    // 新增/修改表單提交略，參考原文完整代碼
  });
  </script>

  <!-- 新增對話框 -->
  <div id="addStu" class="easyui-dialog" title="新增學生" data-options="modal:true">
    <form id="addStuf">
      <div><span>姓名</span><input class="easyui-textbox" name="sname"></div>
      <div><span>年齡</span><input class="easyui-textbox" name="sage"></div>
    </form>
    <a href="#" class="easyui-linkbutton" onclick="$('#addStuf').form('submit')">送出</a>
  </div>

  <!-- 修改對話框 -->
  <div id="updateStu" class="easyui-dialog" title="修改學生" data-options="modal:true">
    <form id="upStu">
      <input type="hidden" name="sid">
      <div><span>姓名</span><input class="easyui-textbox" name="sname"></div>
      <div><span>年齡</span><input class="easyui-textbox" name="sage"></div>
    </form>
    <a href="#" class="easyui-linkbutton" onclick="$('#upStu').form('submit')">送出</a>
  </div>
</body>
</html>

EasyUI Datagrid 關鍵參數對照

web.xml Servlet 映射

<servlet>
  <servlet-name>selectStus</servlet-name>
  <servlet-class>com.zr.controller.SearchController</servlet-class>
</servlet>
<servlet-mapping>
  <servlet-name>selectStus</servlet-name>
  <url-pattern>/selectStus</url-pattern>
</servlet-mapping>