异常教程

jQuery EasyUI 树形菜单 – 树形网格添加分页（建议收藏）

更新时间:

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

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

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

一、前言

在现代 Web 开发中，树形菜单和树形网格是常见的数据展示组件。它们能够将层级关系清晰地呈现给用户，但当数据量过大时，如何实现分页功能却是一个挑战。本文将以 jQuery EasyUI 树形菜单 – 树形网格添加分页 为核心，通过实际案例和代码示例，逐步讲解如何结合树形结构与分页控件，帮助开发者实现高效的数据管理。

二、基础概念解析

1. jQuery EasyUI 树形菜单与树形网格

树形菜单（Tree Menu）是 EasyUI 提供的用于展示层级结构的组件，常用于导航栏或数据分类。而 树形网格（TreeGrid）则结合了表格与树形结构，允许用户在树形节点中展示多列数据，例如部门-员工关系或项目-任务列表。

树形结构的比喻

可以将树形结构想象为“家族族谱”：每个节点代表一个家庭成员，父节点（如祖父）连接子节点（如子女），而子节点又能继续扩展（如孙子）。树形网格则像是在族谱旁附加了更多信息（如年龄、职业），形成更丰富的数据视图。

2. 分页功能的必要性

当树形节点数量超过屏幕显示范围时，分页能有效提升用户体验。例如，一个企业拥有数千个部门和员工时，一次性加载所有数据会导致页面卡顿，而分页可将数据按页分批加载，降低资源消耗。

三、环境搭建与基础代码

1. 引入依赖库

使用 jQuery EasyUI 需要引入以下资源：

<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">  
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">  
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>  
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

2. 创建基础 HTML 结构

<div class="easyui-treegrid"  
     id="treeGrid"  
     style="width:100%;height:400px">  
</div>  
<div id="pagination"></div>
  • treeGrid 是树形网格的容器。
  • pagination 是分页控件的容器，后续通过 JavaScript 动态绑定。

四、实现树形网格与分页联动

1. 配置树形网格

通过 EasyUI 的 treegrid 方法初始化组件，并定义列（columns）和数据源（url）：

$('#treeGrid').treegrid({  
    url: '/api/data', // 模拟数据接口  
    idField: 'id',  
    treeField: 'name',  
    columns: [[  
        {field: 'name', title: '名称', width: 150},  
        {field: 'size', title: '数量', width: 100},  
        {field: 'date', title: '创建时间', width: 150}  
    ]],  
    onLoadSuccess: function() {  
        // 数据加载完成后触发，用于初始化分页  
        initPagination();  
    }  
});

关键点解释：

  • url 指向数据接口，需返回分页后的树形结构数据。
  • idField 和 treeField 定义数据的唯一标识和树形字段。

2. 实现分页控件

使用 EasyUI 的 pagination 组件创建分页条，并绑定到树形网格：

function initPagination() {  
    $('#pagination').pagination({  
        total: 1000, // 总数据条数（需动态获取）  
        pageSize: 20,  
        showPageList: true,  
        onSelectPage: function(pageNumber, pageSize) {  
            loadTreeGridData(pageNumber, pageSize);  
        }  
    });  
}  

function loadTreeGridData(page, size) {  
    // 模拟异步请求，返回分页数据  
    $.ajax({  
        url: '/api/data',  
        data: {page: page, rows: size},  
        success: function(data) {  
            // 更新树形网格数据  
            $('#treeGrid').treegrid('loadData', data);  
        }  
    });  
}

核心逻辑：

  • total 需通过后端接口动态获取总条数，此处需替换为真实逻辑。
  • onSelectPage 事件触发时，重新加载指定页码的数据。

3. 模拟后端分页数据接口

为方便演示，可手动构造返回数据：

// 模拟接口 /api/data  
$.mockjax({  
    url: '/api/data',  
    response: function(settings) {  
        const page = settings.data.page || 1;  
        const pageSize = settings.data.rows || 20;  
        const start = (page - 1) * pageSize;  
        const end = page * pageSize;  
        const data = {  
            total: 1000,  
            rows: testData.slice(start, end) // testData 为预定义的树形数据  
        };  
        return data;  
    }  
});

五、进阶优化与注意事项

1. 动态加载子节点

若数据量极大，可启用懒加载（Lazy Load）：

$('#treeGrid').treegrid({  
    onLoadSuccess: function(node, data) {  
        if (data && data.length > 0) {  
            $(this).treegrid('expandAll'); // 默认展开所有节点  
        }  
    },  
    onLoadError: function() {  
        alert('数据加载失败！');  
    }  
});

2. 性能优化技巧

  • 数据分页与过滤：在后端实现分页逻辑，避免前端处理大数据。
  • 缓存机制：对于静态数据，可缓存已加载的节点，减少重复请求。
  • 虚拟滚动：结合 easyui-virtualscroll 插件，优化长列表的渲染性能。

3. 典型问题与解决方案

  • 分页数据不刷新：检查 loadData 方法是否正确调用，确保数据格式与 EasyUI 兼容。
  • 树形结构层级错乱：确认数据中的 pid（父节点 ID）字段是否正确关联。

六、完整代码示例

以下是一个完整的 HTML 文件，整合了树形网格与分页功能：

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>jQuery EasyUI 树形网格分页示例</title>  
    <!-- 引入 EasyUI 资源 -->  
    <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">  
    <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">  
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>  
    <script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>  
</head>  
<body>  
    <div class="easyui-treegrid" id="treeGrid" style="width:100%;height:400px"></div>  
    <div id="pagination"></div>  

    <script>  
    // 模拟树形数据  
    const testData = [  
        {id: 1, pid: 0, name: '部门A', size: 50, date: '2023-01-01'},  
        {id: 2, pid: 1, name: '子部门A-1', size: 20, date: '2023-02-01'},  
        // ... 更多数据  
    ];  

    // 初始化树形网格  
    $('#treeGrid').treegrid({  
        data: testData, // 初始数据（可替换为 url 请求）  
        idField: 'id',  
        treeField: 'name',  
        columns: [[  
            {field: 'name', title: '名称', width: 150},  
            {field: 'size', title: '数量', width: 100},  
            {field: 'date', title: '创建时间', width: 150}  
        ]],  
        onLoadSuccess: function() {  
            initPagination();  
        }  
    });  

    // 初始化分页  
    function initPagination() {  
        $('#pagination').pagination({  
            total: testData.length,  
            pageSize: 20,  
            onSelectPage: function(pageNumber, pageSize) {  
                loadTreeGridData(pageNumber, pageSize);  
            }  
        });  
    }  

    // 加载分页数据（实际开发需替换为 AJAX 请求）  
    function loadTreeGridData(page, size) {  
        const start = (page - 1) * size;  
        const end = page * size;  
        constpagedData = testData.slice(start, end);  
        $('#treeGrid').treegrid('loadData', pagedData);  
    }  
    </script>  
</body>  
</html>

七、总结

本文通过 jQuery EasyUI 树形菜单 – 树形网格添加分页 的实战案例，展示了如何结合树形结构与分页功能，解决大数据量下的性能问题。开发者可通过以下步骤实现：

  1. 理解 EasyUI 树形组件的基础配置。
  2. 通过 pagination 控件实现分页交互。
  3. 通过 AJAX 动态加载分页数据并更新树形结构。
  4. 结合性能优化技巧提升用户体验。

希望本文能帮助开发者掌握这一实用技能，并在实际项目中灵活应用！

最新发布

查看更多文章