首页
/ 正文

jQuery EasyUI 扩展 – DWR 加载器（长文讲解）

更新时间: 2025-04-03 13:05:09

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前，星球内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习，欢迎点击围观

前言：构建高效前端交互的桥梁

在现代 Web 开发中，前端与后端的高效通信是提升用户体验的关键。jQuery EasyUI 作为一套功能强大的 UI 框架，提供了丰富的组件和模块，但其默认配置在处理复杂异步请求时，仍需要借助其他工具来优化性能和简化开发流程。DWR（Direct Web Remoting） 正是这样一个能与 EasyUI 紧密结合的工具，它通过简化 JavaScript 与 Java 后端的交互，成为构建动态 Web 应用的利器。

本文将深入讲解如何通过 DWR 加载器 扩展 EasyUI，帮助开发者快速实现前后端数据交互，并通过实际案例演示其核心功能。无论是对 EasyUI 初探的入门者，还是希望优化现有项目的中级开发者，都能从中获得实用的知识与技巧。

一、DWR 与 EasyUI 的协同价值

1.1 DWR：跨越前后端的“快递员”

DWR 是一种基于 Java 的开源框架，其核心目标是让 JavaScript 能够直接调用服务器端的 Java 方法，无需手动编写复杂的 AJAX 请求。它的工作原理类似于“快递服务”：

前端（JavaScript） 发起请求如同填写快递单（调用方法名、参数）；
DWR 中间件 负责打包（序列化参数）并发送到后端（服务器）；
后端（Java） 处理请求后，将结果打包返回给前端。

相比传统的 AJAX 方式，DWR 省去了手动拼接 URL、解析 JSON 等步骤，极大提升了开发效率。

1.2 EasyUI：前端组件的“工具箱”

jQuery EasyUI 提供了诸如 DataGrid、Dialog、Menu 等组件，帮助开发者快速搭建功能丰富的 Web 界面。然而，当需要与后端频繁交互时（如分页查询、动态加载数据），EasyUI 默认的 load 方法可能显得笨拙。

1.3 DWR 加载器：二者的“适配器”

通过开发 DWR 加载器 扩展，可以无缝对接 EasyUI 组件与 DWR 的调用逻辑。例如：

// 传统 EasyUI DataGrid 加载数据  
$('#dg').datagrid({  
    url: '/api/data',  
    queryParams: { page: 1 },  
    onLoadSuccess: function(data) { ... }  
});  

// 使用 DWR 加载器后  
$('#dg').dwrLoader({  
    dwrMethod: 'loadData',  
    dwrParam: { page: 1 },  
    successCallback: function(data) { ... }  
});

这一扩展简化了配置，同时保持了代码的可读性。

二、DWR 加载器的实现原理与步骤

2.1 环境准备与依赖安装

2.1.1 安装 DWR

在 Maven 项目中添加 DWR 依赖：

<dependency>  
    <groupId>org.directwebremoting</groupId>  
    <artifactId>dwr</artifactId>  
    <version>3.0.2</version>  
</dependency>

2.1.2 配置 EasyUI

确保项目中已引入 jQuery、EasyUI 的 CSS 和 JS 文件：

<link rel="stylesheet" href="easyui/themes/default/easyui.css">  
<script src="jquery.min.js"></script>  
<script src="jquery.easyui.min.js"></script>

2.2 实现 DWR 加载器插件

通过 jQuery 插件模式封装 DWR 调用逻辑，使其与 EasyUI 组件兼容：

(function($) {  
    $.fn.dwrLoader = function(options) {  
        var settings = $.extend({  
            dwrMethod: null,          // 必须指定的 DWR 方法名  
            dwrParam: {},             // 传递给后端的参数  
            successCallback: function(data) {},  
            errorCallback: function(error) {}  
        }, options);  

        return this.each(function() {  
            var $this = $(this);  
            DWRUtil.useLoadingMessage(); // 显示加载提示  

            // 调用 DWR 方法  
            window[settings.dwrMethod](settings.dwrParam, function(result) {  
                settings.successCallback(result);  
                $this.dwrLoaderCallback(result); // 可选：触发组件内置回调  
            }, function(error) {  
                settings.errorCallback(error);  
            });  
        });  
    };  
})(jQuery);

2.3 后端 DWR 方法配置

在 Java 后端定义可被 DWR 调用的方法，并配置 DWR 的 dwr.xml：

public class DataServer {  
    public DataResponse loadData(int page) {  
        // 模拟数据库查询  
        return new DataResponse(page * 10, getMockData());  
    }  
}

<dwr:configuration>  
    <dwr:convert converter="bean" match="com.example.DataResponse"/>  
    <dwr:allow>  
        <dwr:convert match="com.example.DataServer" create="new"/>  
    </dwr:allow>  
</dwr:configuration>

三、实战案例：DWR 加载器在 EasyUI DataGrid 中的应用

3.1 需求背景

假设需要实现一个分页显示用户数据的页面，要求：

使用 EasyUI DataGrid 展示用户列表；
通过 DWR 加载器实现分页数据的异步加载；
在加载时显示“数据加载中”提示。

3.2 前端代码实现

<table id="userGrid"></table>  

<script>  
$(function() {  
    // 初始化 DataGrid  
    $('#userGrid').datagrid({  
        columns: [[  
            {field: 'id', title: 'ID'},  
            {field: 'name', title: 'Name'}  
        ]],  
        pagination: true,  
        pageSize: 10,  
        onLoadSuccess: function(data) {  
            // 自定义加载成功后的操作  
        }  
    });  

    // 使用 DWR 加载器加载第一页数据  
    $('#userGrid').dwrLoader({  
        dwrMethod: 'loadUsers',  
        dwrParam: { page: 1 },  
        successCallback: function(response) {  
            $('#userGrid').datagrid('loadData', response.data);  
        }  
    });  
});  
</script>

3.3 后端响应逻辑

public class UserServer {  
    public UserResponse loadUsers(int page) {  
        List<User> users = userService.findPage(page, 10);  
        return new UserResponse(users, page);  
    }  
}

3.4 关键点解析

分页逻辑：通过 dwrParam 传递 page 参数，后端根据页码返回对应数据；
数据绑定：调用 datagrid('loadData', data) 将后端返回的 JSON 数据直接绑定到表格；
错误处理：在 errorCallback 中可统一处理网络异常或后端错误。

四、扩展技巧与性能优化

4.1 动态参数绑定

在某些场景下，参数可能需要根据用户操作动态生成。例如，在表单提交后更新 DataGrid 数据：

$('#searchForm').submit(function() {  
    var keyword = $('#keyword').val();  
    $('#userGrid').dwrLoader({  
        dwrMethod: 'searchUsers',  
        dwrParam: { keyword: keyword },  
        successCallback: function(data) {  
            $('#userGrid').datagrid('loadData', data);  
        }  
    });  
    return false;  
});

4.2 缓存机制优化

为高频访问的数据添加本地缓存，减少重复请求：

var cache = {};  
$('#userGrid').dwrLoader({  
    dwrMethod: 'loadUsers',  
    dwrParam: { page: 1 },  
    beforeLoad: function(param) {  
        if (cache[param.page]) {  
            return cache[param.page]; // 直接返回缓存数据  
        }  
    },  
    successCallback: function(data) {  
        cache[param.page] = data; // 缓存结果  
    }  
});

4.3 异常重试机制

增加请求失败的重试逻辑，提升容错性：

function retryLoad(retriesLeft) {  
    $('#userGrid').dwrLoader({  
        dwrMethod: 'loadUsers',  
        dwrParam: { page: 1 },  
        errorCallback: function() {  
            if (retriesLeft > 0) {  
                setTimeout(function() {  
                    retryLoad(retriesLeft - 1);  
                }, 1000);  
            }  
        }  
    });  
}

五、常见问题与解决方案

5.1 “DWR 方法未定义”错误

现象：控制台提示 ReferenceError: dwrMethod is not defined。
原因：DWR 方法未在 dwr.xml 中配置，或方法名拼写错误。
解决：检查后端类是否被正确注册到 DWR 配置中。

5.2 数据格式不兼容

现象：EasyUI 组件无法解析后端返回的 JSON 数据。
原因：后端返回的数据结构与组件期望的格式不匹配（如缺少 total 字段）。
解决：在 successCallback 中对数据进行格式转换：

successCallback: function(rawData) {  
    var formattedData = {  
        total: rawData.totalCount,  
        rows: rawData.items  
    };  
    $('#userGrid').datagrid('loadData', formattedData);  
}

六、结论：迈向更高效的前端开发

通过将 DWR 加载器 与 jQuery EasyUI 结合，开发者能够显著提升前后端交互的效率与代码的可维护性。这一扩展不仅简化了异步请求的配置，还通过统一的接口降低了组件与业务逻辑的耦合度。

对于初学者，建议从简单案例入手（如分页表格），逐步掌握 DWR 的调用机制与 EasyUI 组件的交互方式；中级开发者则可在此基础上，进一步探索缓存、重试等高级功能，打造更健壮的应用。

未来，随着前端框架的迭代，DWR 加载器仍可通过适配新的 API 或结合其他工具（如 Promise 对象），持续为开发者提供便利。掌握这一技术栈，将为构建现代化 Web 应用奠定坚实的基础。