zTree的核心处理逻辑
发布日期：2021-05-08 23:40:50
浏览次数：22
分类：技术文章
本文共 1329 字，大约阅读时间需要 4 分钟。
zTree 是一个前端树形结构的插件。
使用起来很简单，我们重点关注一下插件的核心代码。
首先，zTree需要如下的数据结构：
let areaData = [ { "id": "1", "pId": "0", "name": " 河南省", "sort": "0" }, { "id": "2", "pId": "1", "name": "鹤壁", "sort": "10" }, { "id": "3", "pId": "2", "name": "市场部", "sort": "10" }, { "id": "4", "pId": "2", "name": "网运部", "sort": "20" }];
然后zTree 会根据里面的id以及parentId 把这种扁平化的数据变成嵌套的树形结构，如下：
var afterAreaData = [{ "id": "1", "pId": "0", "name": " 河南省", "sort": "0", "children": [{ "id": "2", "pId": "1", "name": "鹤壁", "sort": "10", "children": [{ "id": "3", "pId": "2", "name": "市场部", "sort": "10" }, { "id": "4", "pId": "2", "name": "网运部", "sort": "20" }] }]}]; 是不是很好看，很面向对象。这种理想的数据结构看起来很直观。
核心代码如下：
function transformTozTreeFormat(sNodes){ var i,l, key = 'id', parentKey = 'pId', childKey = 'children'; if (!key || key=="" || !sNodes) return []; if (Object.prototype.toString.apply(sNodes) === "[object Array]") { var r = []; var tmpMap = []; for (i=0, l=sNodes.length; i 方法里面的key值根据自己的需要修改。
今天就这样
发表评论
最新留言
哈哈，博客排版真的漂亮呢~
[***.90.31.176]2025年05月07日 07时28分59秒
关于作者
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！
-- 愿君每日到此一游！
推荐文章
0基础成功转行网络安全工程师，年薪30W+，经验总结都在这（建议收藏）
2025-03-29
100个电脑常用组合键大全（非常详细）零基础入门到精通，收藏这篇就够了
2025-03-29
10个程序员可以接私活的平台
2025-03-29
10条sql语句优化的建议
2025-03-29
10款宝藏编程工具！新手必备，大牛强烈推荐！ 从零基础到精通，收藏这篇就够了！
2025-03-29
10款最佳免费WiFi黑客工具（附传送门）零基础入门到精通，收藏这一篇就够了
2025-03-29
15个Python数据分析实用技巧（非常详细）零基础入门到精通，收藏这一篇就够了
2025-03-29
15个备受欢迎的嵌入式GUI库，从零基础到精通，收藏这篇就够了！
2025-03-29
15个程序员常逛的宝藏网站！！从零基础到精通，收藏这篇就够了！
2025-03-29
1分钟学会在Linux下模拟网络延迟
2025-03-29
2023应届毕业生找不到工作很焦虑怎么办?
2025-03-29
2023网络安全现状，一个（黑客）真实的收入
2025-03-29
2024 年需要了解的顶级大数据工具（非常详细）零基础入门到精通，收藏这一篇就够了
2025-03-29
2024大模型行业应用十大典范案例集（非常详细）零基础入门到精通，收藏这一篇就够了
2025-03-29
白红宇的个人博客 - 记录点点滴滴的事 - 您是第 465736190 位访客