EasyUI DataGrid 依 Form 表單條件查詢並載入資料

需求

使用者在表單輸入查詢條件，送出後將結果載入 DataGrid。

解決方案：使用 queryParams 動態傳參

// 1. 表單提交事件
$('#searchForm').submit(function() {
    // 2. 取得表單序列化參數
    var params = $(this).serializeObject(); // 需引用 jquery.serializeObject 插件或自行實作
    // 3. 更新 DataGrid queryParams
    $('#tt').datagrid('options').queryParams = params;
    // 4. 重新載入第一頁
    $('#tt').datagrid('load');
    return false; // 阻止預設提交
});

// 輔助：表單序列化為物件
$.fn.serializeObject = function() {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name]) {
            if (!o[this.name].push) o[this.name] = [o[this.name]];
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

關鍵點

• queryParams 物件會隨每次 load/reload 送至伺服器（URL 參數或 POST Body）。
• 後端 Controller 直接接收對應參數名稱即可（Spring MVC 自動綁定）。
• 分頁參數（page、rows）由 DataGrid 自動附加，無需手動處理。

完整流程圖

1. 使用者填寫表單 → 點擊「查詢」
2. 前端 serializeObject 取得 {name: "張三", dept: "IT"}
3. datagrid('options').queryParams = params
4. datagrid('load') 發送請求 /showUser.action?page=1&rows=10&name=張三&dept=IT
5. 後端查詢資料庫 → 回傳 {total: 5, rows: [...]}
6. DataGrid 自動渲染資料

進階：重置查詢

$('#resetBtn').click(function() {
    $('#searchForm').form('clear');
    $('#tt').datagrid('options').queryParams = {};
    $('#tt').datagrid('load');
});