三亩地 三亩地SAN MU DI · CODE DIARY
ARTICLE DETAIL

日记详情

真实记录编程学习的某一天,欢迎挑你感兴趣的翻一翻。

递归构建树形JSON结构的函数

递归构建树形JSON结构的函数

今天在用KingFusion开发MES系统过程中用到了一个递归构建树形JSON结构的函数,

下面结合AI的解析一起学习一下。

01 函数代码:

function getJsonTree(data, parentId) { var itemArr = []; for (var i = 0; i < data.length; i++) { var node = data[i]; if (node.ParientID == parentId) { var rowData = {}; rowData['id'] = node.c_Code; rowData['text'] = node.c_Name; rowData['parentid'] =node.ParientID; rowData['state'] ='closed'; if(node.ParientID==='ROOT'){ rowData['iconCls']='icon-root'; }else{ rowData['iconCls']='icon-circle'; } rowData['children'] = getJsonTree(data,node.c_Code); itemArr.push(rowData); } } return itemArr; };

02 函数功能

这是一个递归构建树形 JSON 结构的函数,用于将扁平的数组数据(通常来自数据库或接口)转换为层级嵌套的树形结构,常用于前端树形组件(如 EasyUI 的 Tree、ZTree 等)的数据渲染。

03 参数说明

data:扁平的源数据数组,每个元素是一个包含节点信息的对象。

parentId:当前要查找的父节点 ID,用于递归定位子节点层级。

04 逻辑流程解析

①初始化结果数组:

var itemArr=[];

用于存放当前层级的所有节点。

遍历源数据

for (var i = 0; i < data.length; i++) 逐个检查源数据中的每个节点。

③匹配父节点 ID:

if (node.ParientID == parentId) 判断当前节点的父 ID 是否等于传入的parentId。

④构建目标节点对象:

id:取源数据的c_Code字段作为节点唯一标识。

text:取源数据的c_Name字段作为节点显示文本。

parentid:记录当前节点的父 ID(即node.ParientID)。

state:默认设为'closed'(表示节点初始折叠状态,常见于 EasyUI Tree)。

iconCls:根据父 ID 是否为'ROOT'设置不同图标类名(根节点用icon-root,其他用icon-circle)。

⑤递归查找子节点:

rowData['children'] = getJsonTree(data, node.c_Code); 以当前节点的c_Code作为新的parentId,递归调用自身查找子节点,赋值给children属性。

⑥收集节点:

itemArr.push(rowData); 将构建好的节点对象加入当前层级结果数组。

⑦返回结果:

循环结束后,返回当前层级的节点数组。

05 注意事项

①递归终止条件:

当某个parentId在源数据中没有匹配的node.ParientID时,递归自然终止。

②适用场景:

要求源数据必须是扁平结构,且每个节点包含明确的父ID字段和自身ID字段(这里分别是ParientID和c_Code)。

← 返回列表