jQuery EasyUI 树形网格分页功能实现教程

本文详细介绍如何在 jQuery EasyUI 的树形网格（TreeGrid）中启用分页功能。通过配置前端 pagination 属性与后端 PHP 脚本配合，实现大数据量下的动态加载与分页显示。

树形网格分页效果预览

上图展示了启用分页后的树形网格效果。网格底部出现了标准的分页工具栏，允许用户切换页面、调整每页显示条数，从而在数据量较大时优化加载速度和用户体验。

实现前的准备工作

在开始编码之前，请确保您的开发环境满足以下条件：

• jQuery EasyUI 库：已正确引入 jquery.easyui.min.js 和 easyui.css。
• 后端环境：支持 PHP 的运行环境（如 Apache/Nginx + PHP），并配置好数据库连接。
• 数据库：包含产品数据的 products 表，字段至少包含 id, name, parentId, quantity, price。

前端配置：启用分页属性

要在树形网格中启用分页，核心在于 data-options 中添加 pagination: true。当此属性为真时，EasyUI 会在页面加载或翻页时自动向服务器发送 page（当前页码）和 rows（每页条数）参数。

第1步：编写前端 HTML 结构

使用

关键参数说明：

• pagination: true：启用分页功能。
• pageSize：默认每页显示的记录数。
• pageList：用户可选择的每页显示条数列表（如 2, 10, 20）。
• onBeforeLoad：加载数据前的回调函数。当 row 为空（即加载顶层数据）时，手动将 param.id 设为 0，以便后端区分是“翻页”还是“展开子节点”。

后端处理：PHP 分页逻辑

后端脚本 treegrid4_getdata.php 负责接收前端参数，查询数据库，并返回符合分页要求的 JSON 数据。由于树形网格的特殊性，后端需要区分两种场景：

1. 顶层分页：用户切换页码时，id=0，需要返回指定页码的顶层节点，并计算总记录数以支持分页控件。
2. 子节点加载：用户展开某个节点时，id > 0，直接返回该父节点下的所有子节点（通常子节点不进行分页，或根据需求单独处理）。

第2步：编写后端 PHP 代码

以下是优化后的后端代码示例。注意：原文使用了已废弃的 mysql_query，实际项目中建议使用 mysqli 或 PDO 以提高安全性和兼容性。此处为保持与原文逻辑一致，仍展示核心逻辑，但建议在实际开发中替换。

 0 ? true : false;
}
?>

参数传递与交互机制

前端与后端通过以下参数进行交互：

• page：当前请求的页码（仅顶层分页时有效）。
• rows：每页显示的记录数。
• id：父节点的 ID。当 id=0 时，表示请求顶层数据；当 id>0 时，表示请求特定父节点下的子数据。

注意：当用户展开一个节点时，id 值大于 0，此时后端直接返回子节点列表，不进行分页处理（除非子节点数据量极大，需另行设计分页逻辑）。当用户切换页码时，id 值被强制设为 0，确保只加载顶层数据的新页面。

常见问题与调整

1. 分页控件不显示或无法翻页

表现：网格底部没有分页工具栏，或者翻页后数据无变化。

原因：未设置 pagination: true，或后端返回的 JSON 格式不符合 EasyUI 要求（必须包含 total 和 rows 字段）。

解决：检查前端配置，并确保后端在顶层分页场景下返回 {"total": 100, "rows": [...]} 格式的数据。

2. 展开节点后数据错乱

表现：展开子节点时，显示了错误的数据或分页控件干扰了子节点加载。

原因：onBeforeLoad 回调中未正确处理 param.id，导致子节点加载时也被当作顶层分页处理。

解决：确保 onBeforeLoad 中仅在 !row（顶层加载）时设置 param.id = 0，展开节点时保持 param.id 为当前节点的 ID。

总结

通过在前端启用 pagination 属性，并在后端 PHP 脚本中根据 id 值区分顶层分页和子节点加载，即可实现 jQuery EasyUI 树形网格的分页功能。关键在于正确处理 onBeforeLoad 回调，确保分页参数与树形结构的层级关系一致。

以上就是 jQuery EasyUI 树形网格添加分页功能的详细内容，更多关于 jQuery EasyUI 树形网格的资料请关注本站其它相关文章！