SSH 電商專案實戰 (六)：EasyUI DataGrid 數據顯示與分頁實現

EasyUI DataGrid 簡介

DataGrid 是 EasyUI 核心數據網格組件，支援分頁、排序、編輯、凍結列、行詳情、匯出等豐富功能，透過 JSON 數據源驅動，極大簡化後台管理介面開發。

前端 DataGrid 配置 (JSP + JavaScript)

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#dg').datagrid({
                url: '${pageContext.request.contextPath}/category/listData', // 後端數據接口
                method: 'get',
                fitColumns: true,        // 自適應列寬
                striped: true,           // 斑馬紋
                nowrap: true,            // 不換行
                singleSelect: true,      // 單選
                pagination: true,        // 底部分頁工具欄
                pageSize: 20,
                pageList: [10, 20, 50, 100],
                rownumbers: true,        // 顯示行號
                frozenColumns: [[        // 凍結列 (左側固定)
                    {field: 'ck', checkbox: true},
                    {field: 'id', title: 'ID', width: 60, sortable: true}
                ]],
                columns: [[
                    {field: 'name', title: '分類名稱', width: 150, 
                        formatter: function(val, row, idx) {
                            return '<span title="' + val + '">' + val + '</span>';
                        }
                    },
                    {field: 'hot', title: '熱門', width: 60, align: 'center',
                        formatter: function(val, row, idx) {
                            return val ? '<span class="badge badge-success">是</span>' 
                                       : '<span class="badge badge-default">否</span>';
                        },
                        styler: function(val, row, idx) {
                            return val ? 'color:green;font-weight:bold;' : 'color:gray;';
                        }
                    },
                    {field: 'createTime', title: '建立時間', width: 150, sortable: true}
                ]],
                toolbar: '#tb',          // 頂部工具欄
                onLoadSuccess: function(data) {
                    console.log('載入 ' + data.total + ' 筆資料');
                }
            });
        });
    </script>
</head>
<body>
    <table id="dg"></table>

    <!-- 頂部工具欄 -->
    <div id="tb" style="padding:5px">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addCategory()">新增</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editCategory()">編輯</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deleteCategory()">刪除</a>
    </div>
</body>
</html>

後端分頁數據接口 (Struts2 Action)

@Controller
@Scope("prototype")
@ParentPackage("shop")
@Namespace("/category")
public class CategoryAction extends BaseAction<Category> {

    @Action(value = "listData", results = @Result(type = "json", params = {"root", "gridModel"}))
    public String listData() {
        // EasyUI 分頁參數: page (當前頁), rows (每頁筆數)
        int page = ServletActionContext.getRequest().getParameter("page") != null 
                   ? Integer.parseInt(ServletActionContext.getRequest().getParameter("page")) : 1;
        int rows = ServletActionContext.getRequest().getParameter("rows") != null 
                   ? Integer.parseInt(ServletActionContext.getRequest().getParameter("rows")) : 20;

        // 查詢總筆數
        long total = categoryService.count(); // 需在 Service 增加 count() 方法

        // 分頁查詢 (Hibernate)
        List<Category> list = categoryService.queryByPage(page, rows); // 需實現分頁查詢

        // 封裝 EasyUI 要求的 JSON 格式: { total: 100, rows: [...] }
        gridModel = new HashMap<String, Object>();
        gridModel.put("total", total);
        gridModel.put("rows", list);
        return SUCCESS;
    }

    // gridModel 需在 BaseAction 或此處定義
    private Map<String, Object> gridModel;
    public Map<String, Object> getGridModel() { return gridModel; }
}

Service 分頁查詢實現

public interface CategoryService extends BaseService<Category> {
    long count();
    List<Category> queryByPage(int page, int rows);
}

@Service
public class CategoryServiceImpl extends BaseServiceImpl<Category> implements CategoryService {
    @Override
    public long count() {
        String hql = "select count(*) from " + entityClass.getSimpleName();
        return (Long) getSession().createQuery(hql).uniqueResult();
    }

    @Override
    public List<Category> queryByPage(int page, int rows) {
        String hql = "from " + entityClass.getSimpleName() + " order by id desc";
        Query query = getSession().createQuery(hql);
        query.setFirstResult((page - 1) * rows);
        query.setMaxResults(rows);
        return query.list();
    }
}

DataGrid 核心屬性速查表

常見問題與解決

• 數據不顯示：檢查 JSON 格式是否為 {total: 100, rows: [...]}，字段名是否與 field 一致。
• 分頁不生效：後端未根據 page/rows 參數分頁，或 total 計算錯誤。
• 排序不工作：sortable: true 需後端接收 sort (字段名) 和 order (asc/desc) 參數動態構建 HQL。
• 凍結列寬度異常：fitColumns: true 與凍結列寬度衝突，需固定凍結列寬度或關閉 fitColumns。
• 中文亂碼：確保 JSP pageEncoding="UTF-8"、Action 返回 JSON 類型設定 contentType="application/json;charset=UTF-8"。