DWR 整合 EasyUI Datagrid 資料綁定：正確處理回調與 loadData 方法

問題現象

EasyUI Datagrid 設定 url: findOrder() 呼叫 DWR 方法，後端回傳 Result 物件包含 JSON 字串，但 Datagrid 顯示空白。

原因

• Datagrid 的 url 參數期望**直接回傳 JSON 陣列**或 {total: N, rows: [...]} 格式。
• DWR 非同步回調回傳的是 Java 物件，Datagrid 無法自動解析。

解決方案：手動呼叫 loadData

// 1. 移除 url 參數
$('#dg').datagrid({
    // ... 其他屬性
    // url: findOrder(),  // 刪除此行
});

// 2. 在頁面載入或查詢按鈕點擊時呼叫 DWR
function loadOrders() {
    $('#dg').datagrid('loading'); // 顯示載入中
    OrderAction.findOrder({callback: function(result) {
        $('#dg').datagrid('loaded');
        if (result.code === '0000') { // 成功代碼
            var jsonData = result.param.jsonStr; // 假設為 {total: 100, rows: [...]}
            $('#dg').datagrid('loadData', jsonData); // 關鍵：手動載入
        } else {
            $.messager.alert('提示', result.msg);
        }
    }});
}

// 3. 頁面載入時自動查詢
$(function() { loadOrders(); });

後端回傳格式建議

@RemoteMethod
public Result findOrder(String params, HttpSession session) {
    // ...
    Map map = new HashMap<>();
    map.put("total", list.size());
    map.put("rows", list); // List 會被 DWR 序列化為 JSON 陣列
    result.setParam(map);
    return result;
}

前端 result.param 即為 {total: N, rows: [...]}，直接傳給 loadData。

關鍵差異

• url：Datagrid 內部發起 HTTP 請求，適用於 REST API。
• loadData：前端已有資料物件（如 DWR 回調），直接渲染，避免二次請求與格式轉換。