jQuery EasyUI TreeGrid 惰性加载节点实现教程

本文详细介绍如何在 jQuery EasyUI 的 TreeGrid 组件中实现惰性加载（Lazy Loading）。通过自定义 loadFilter 将子节点数据暂存，并在节点展开时调用 append 方法动态加载，从而优化大数据量下的页面性能。

最终效果预览

jQuery EasyUI TreeGrid 惰性加载节点效果演示图，展示了文件夹浏览器的树形结构 — 图1：实现惰性加载后的 TreeGrid 界面，初始仅显示顶层节点，点击展开图标后动态加载子节点。

在数据量较大的树形结构中，一次性加载所有节点会导致页面响应缓慢。通过惰性加载，我们首先只获取顶层节点数据，当用户点击节点的展开图标时，才异步请求并加载对应的子节点数据。这种机制能显著提升页面的初始加载速度和交互体验。

前置条件与准备

在开始实现之前，请确保您的项目环境中已正确引入 jQuery 和 jQuery EasyUI 的核心文件。实现惰性加载主要依赖以下两个核心 API：

loadFilter：用于在数据加载到组件前对原始数据进行预处理。
append：用于在指定父节点下动态追加子节点数据。

实现步骤

第1步：配置 TreeGrid 基础结构

首先，在 HTML 中定义一个

元素，并为其添加 easyui-treegrid 类。我们需要在 data-options 中指定数据源 URL、请求方法以及关键的数据处理函数 loadFilter。

Name	Size	Modified Date

在此配置中，loadFilter: myLoadFilter 是启用惰性加载的关键入口。当从 url 获取到初始数据后，EasyUI 会自动调用此函数。

第2步：编写数据预处理逻辑 (loadFilter)

myLoadFilter 函数的核心任务是拦截初始加载的完整数据，将其中的子节点（children）提取出来并隐藏，同时标记节点状态为关闭（closed），从而阻止子节点在初始渲染时显示。

function myLoadFilter(data, parentId) {
    function setData() {
        var todo = [];
        // 遍历所有节点
        for (var i = 0; i < data.length; i++) {
            todo.push(data[i]);
        }
        // 深度优先处理所有节点
        while (todo.length) {
            var node = todo.shift();
            if (node.children) {
                // 1. 将节点状态设为 'closed'，表示未展开
                node.state = 'closed';
                // 2. 将原始的 'children' 属性重命名为 'children1'
                node.children1 = node.children;
                // 3. 清空 'children'，防止 EasyUI 自动渲染子节点
                node.children = undefined;
                // 4. 将处理后的子节点加入待处理队列
                todo = todo.concat(node.children1);
            }
        }
    }
    
    setData(data);
    
    var tg = $(this);
    var opts = tg.treegrid('options');
    
    // 绑定展开前事件
    opts.onBeforeExpand = function(row) {
        // 检查该节点是否存有暂存的子节点数据
        if (row.children1) {
            // 调用 append 方法将暂存的子节点追加到当前节点下
            tg.treegrid('append', {
                parent: row[opts.idField],
                data: row.children1
            });
            // 清空暂存数据，避免重复加载
            row.children1 = undefined;
            // 触发节点的展开动画
            tg.treegrid('expand', row[opts.idField]);
        }
        // 返回 true 允许展开，false 阻止展开
        return row.children1 == undefined;
    };
    
    return data;
}

逻辑说明：

数据暂存：通过 node.children1 = node.children 将子节点数据备份到非标准属性中，并清空 node.children。这利用了 EasyUI 只渲染 children 属性的机制，实现了“有数据但不显示”的效果。
状态标记：将 node.state = 'closed' 确保节点在初始状态下显示为折叠图标。
动态加载：在 onBeforeExpand 事件中，检查是否存在 children1。如果存在，说明该节点尚未展开且存有子数据，此时调用 append 方法将数据正式追加到 TreeGrid 中，并调用 expand 展开节点。

常见问题与调整

节点展开后数据不显示或报错

表现：点击展开图标后，子节点没有加载出来，或者控制台报错。

原因：通常是因为 idField 配置不正确，或者 append 方法中指定的 parent ID 与当前节点的实际 ID 不匹配。

解决方法：确保 HTML 配置中的 idField 与后端返回数据中的 ID 字段名称完全一致。在 append 调用时，使用 row[opts.idField] 动态获取当前节点的 ID。

初始加载数据量过大导致卡顿

表现：即使使用了惰性加载，初始页面打开依然缓慢。

原因：后端接口返回的初始数据（顶层节点）本身包含大量字段或数据量过大。

解决方法：优化后端接口，确保 url 返回的仅仅是顶层节点的基本信息。如果顶层节点数据依然很大，考虑在后端增加分页或限制返回字段。

总结

通过自定义 loadFilter 和 onBeforeExpand 事件，我们可以轻松实现 jQuery EasyUI TreeGrid 的惰性加载功能。这种方法的核心在于“数据暂存”与“按需展开”，既保证了数据的完整性，又极大提升了前端交互的流畅度。对于包含成千上万个节点的大型树形结构，这是必不可少的优化手段。

以上就是 jQuery EasyUI TreeGrid 惰性加载节点的详细内容，更多关于 jQuery EasyUI 树形网格的资料请关注本站其它相关文章！