ECSide 表格組件快速入門：從零構建功能完整的數據列表頁

什麼是 ECSide？

ECSide 是一款基於 JSP Tag 的開源表格組件，專為 Java Web 應用設計。它將複雜的列表展示、分頁、排序、導出、篩選等功能封裝為簡單的標簽，開發者只需將數據集合放入 Request/Session，配置幾行標簽即可生成功能豐富的數據表格，極大減少前端樣板代碼。

核心工作流程

1. 客戶端請求：訪問 Action/Servlet (如 /userlist.do)
2. 後端查詢：Action 調用 Service/DAO 獲取數據 (通常為 List<VO>)
3. 數據綁定：request.setAttribute("key", list) 放入請求域
4. 頁面轉發：Forward 到包含 ECSide 標簽的 JSP
5. 自動渲染：ECSide 解析標簽，生成帶分頁/排序/導出的 HTML 表格

完整實戰範例：用戶信息列表

1. 數據庫表結構

CREATE TABLE USER_INFO (
    USERID INT NOT NULL IDENTITY PRIMARY KEY,
    USERNAME VARCHAR(80) NOT NULL,
    PASSWD VARCHAR(255) NOT NULL,
    USERROLE VARCHAR(10) DEFAULT '1',  -- 0鎖定 1普通 2高級 3管理員 4超管
    REGDATE VARCHAR(20),
    EMAIL VARCHAR(128),
    GENDER VARCHAR(2) DEFAULT '0',     -- 0未知 1男 2女
    MEMO VARCHAR(1024)
);

2. 實體類 (VO)

public class UserInfo {
    private Integer userId;
    private String userName;
    private String passwd;
    private String userRole;
    private String regDate;
    private String email;
    private String gender;
    private String memo;
    // Getter/Setter 省略
}

3. DAO 層 (簡化版)

public class UserDAO extends BaseDAO {
    public List<UserInfo> getAllUsers() {
        String sql = "SELECT * FROM USER_INFO WHERE 1=1";
        List<UserInfo> list = new ArrayList<>();
        try (Connection conn = getConnection();
             PreparedStatement ps = conn.prepareStatement(sql);
             ResultSet rs = ps.executeQuery()) {
            while (rs.next()) {
                UserInfo vo = new UserInfo();
                vo.setUserId(rs.getInt("USERID"));
                vo.setUserName(rs.getString("USERNAME"));
                // ... 其他字段映射
                list.add(vo);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return list;
    }
}

4. Action 層 (Struts 1 DispatchAction)

public class MyTestAction extends DispatchAction {
    public ActionForward getAllUsers(ActionMapping mapping, ActionForm form,
                                     HttpServletRequest request, HttpServletResponse response) {
        UserDAO dao = (UserDAO) getBean("userDAO"); // Spring 獲取
        List<UserInfo> allUsers = dao.getAllUsers();
        request.setAttribute("allUsers", allUsers); // 關鍵：綁定鍵名
        return mapping.findForward("userlistPage");
    }
}

5. JSP 頁面：ECSide 標簽核心配置

<%@ taglib uri="https://www.extremecomponents.org" prefix="ec" %>
<%
    String webapp = request.getContextPath();
%>
<!-- 必需靜態資源 -->
<link rel="stylesheet" type="text/css" href="<%=webapp%>/common/css/ECSide_style.css" />
<script type="text/javascript" src="<%=webapp%>/common/js/prototype_mini.js"></script>
<script type="text/javascript" src="<%=webapp%>/common/js/ECSide.js"></script>

<ec:table items="allUsers" var="user"
    retrieveRowsCallback="process"
    action="<%=webapp%>/simpledemo.do?actionMethod=getAllUsers"
    title="用戶列表"
    width="100%"
    classic="true">

    <ec:row>
        <ec:column width="50" property="_0" title="序號" value="${GLOBALROWCOUNT}" />
        <ec:column width="80" property="userRole" title="角色" />
        <ec:column property="userName" title="用戶名" />
        <ec:column width="100" property="passwd" title="密碼" />
        <ec:column width="120" property="email" title="電子信箱" />
        <ec:column width="70" property="gender" title="性別" />
    </ec:row>
</ec:table>

核心標簽屬性詳解

<ec:table> 主表格屬性

<ec:column> 列屬性

進階技巧與注意事項

• 內存分頁 vs 數據庫分頁：數據量 < 5000 可用 retrieveRowsCallback="process" 內存分頁；大數據量必須用 jdbc 模式配合 LimitHelper 實現物理分頁
• 列渲染自定義：使用 value 屬性配合 EL/JSTL 實現條件顯示、超鏈接、按鈕等
• 導出功能：內建 Excel/CSV/PDF 導出，需在 web.xml 配置 ExportController Servlet
• 靜態資源路徑：CSS/JS 必須正確引入，否則分頁、排序圖標、彈窗樣式會失效

總結

ECSide 以「約定優於配置」理念，讓開發者用極少代碼實現企業級列表頁。核心在於：Action 綁定正確鍵名的集合 → JSP 標簽屬性映射正確屬性 → 引入必要靜態資源。掌握這三點，即可快速構建專業的數據展示界面。