jQuery EasyUI 树形菜单：利用 loadFilter 加载父/子节点数据

本文详解如何在 jQuery EasyUI 中使用 loadFilter 选项，将包含 parentId 的平铺数据转换为标准的树形菜单格式。通过具体代码示例，展示如何遍历数据并构建父子层级关系，解决直接加载邻接列表模型数据的问题。

最终效果预览

在使用 jQuery EasyUI 的 Tree 组件时，通常后端返回的数据是平铺的列表形式（即邻接列表模型），每个节点存储一个 parentId 来表示其父级。直接加载这种数据会导致树形菜单无法正确显示层级关系。我们需要在加载前将其转换为标准的树形数据格式（包含 children 数组）。

前置准备与数据格式说明

在开始编码之前，需要明确原始数据的结构。通常这种数据被称为“邻接列表模型”，其特点如下：

• 每个节点包含 id（唯一标识）和 parentId（父节点ID）。
• 根节点的 parentId 通常为 0 或 null。
• 数据以数组形式平铺返回，而非嵌套结构。

以下是一个典型的父/子节点数据示例（注意：原文中第一个对象存在拼写错误 parendId，实际代码中应统一使用 parentId）：

[  {"id":1,"parentId":0,"name":"Foods"},  {"id":2,"parentId":1,"name":"Fruits"},  {"id":3,"parentId":1,"name":"Vegetables"},  {"id":4,"parentId":2,"name":"apple"},  {"id":5,"parentId":2,"name":"orange"},  {"id":6,"parentId":3,"name":"tomato"},  {"id":7,"parentId":3,"name":"carrot"},  {"id":8,"parentId":3,"name":"cabbage"},  {"id":9,"parentId":3,"name":"potato"},  {"id":10,"parentId":3,"name":"lettuce"}]

配置 loadFilter 加载树形菜单

EasyUI Tree 插件提供了一个 loadFilter 选项，它允许我们在数据到达组件之前对其进行自定义处理。这是实现平铺数据转树形结构的关键。

第1步：初始化 Tree 并指定 loadFilter

在初始化 #tt 元素时，通过 url 指定数据源，并定义 loadFilter 函数。该函数接收原始数据数组，并返回转换后的树形数据。

$('#tt').tree({  url: 'data/tree6_data.json',  loadFilter: function(rows){    return convert(rows);  }});

这里调用了自定义的 convert 函数，该函数负责将平铺数组重组为嵌套对象。

实现数据转换逻辑

convert 函数的核心逻辑分为两步：首先找出所有根节点（即没有父节点或父节点ID为0的节点），然后递归地（通过迭代方式）将子节点挂载到对应的父节点下。

第2步：编写 convert 转换函数

以下是完整的转换实现代码，包含详细注释：

function convert(rows) {  // 辅助函数：检查 parentId 是否存在于 rows 中  function exists(rows, parentId) {    for(var i=0; i

逻辑解析

• 查找根节点：通过 exists 函数判断每个节点的 parentId 是否在其他节点的 id 中存在。如果不存在，则该节点为根节点。
• 构建层级：使用一个队列 toDo 存储待处理的节点。初始时将所有根节点加入队列。
• 迭代挂载：从队列中取出一个节点，遍历原始数据找到所有以该节点 id 为 parentId 的子节点，并将它们添加到父节点的 children 数组中。随后将这些子节点也加入队列，以便继续查找它们的子节点。
• 返回结果：当队列为空时，所有节点均已处理完毕，返回构建好的 nodes 数组。

常见问题与调整

1. 数据字段名不一致

表现：树形菜单无法显示或显示为空。

原因：后端返回的字段名与前端代码中使用的 parentId 不一致（如原文示例中的 parendId 拼写错误）。

解决方法：确保后端返回的 JSON 数据中，父节点标识字段统一为 parentId，或者在 convert 函数中根据实际字段名进行调整。

2. 性能问题

表现：数据量较大时，页面加载缓慢。

原因：当前的 exists 函数和内部循环使用了线性搜索，时间复杂度为 O(N^2)。

解决方法：对于大数据量，建议在后端直接返回树形结构，或者在前端使用哈希表（对象映射）将 id 到节点的映射关系建立起来，将查找时间复杂度降低至 O(1)。

总结

通过 jQuery EasyUI 的 loadFilter 选项，我们可以灵活地处理各种数据格式。本文介绍的 convert 函数提供了一种通用的方法，将平铺的邻接列表数据转换为树形菜单所需的嵌套结构。这种方法适用于大多数需要展示层级关系且后端数据为平铺结构的场景。

以上就是 jQuery EasyUI 树形菜单利用 loadFilter 加载父/子节点的详细内容，更多关于 jQuery EasyUI 树形菜单的资料请关注本站其它相关文章！