02zTree - 最简单的入门例子(JSON 数据)

简介: 02zTree - 最简单的入门例子(JSON 数据)

标准的JSON数据

效果图:

标准的 JSON 数据需要嵌套表示节点的父子包含关系,例如:

[
      { name:"父节点1 - 展开", open:true,
        children: [
          { name:"父节点11 - 折叠",
            children: [
              { name:"叶子节点111"},
              { name:"叶子节点112"},
              { name:"叶子节点113"},
              { name:"叶子节点114"}
            ]},
          { name:"父节点12 - 折叠",
            children: [
              { name:"叶子节点121"},
              { name:"叶子节点122"},
              { name:"叶子节点123"},
              { name:"叶子节点124"}
            ]},
          { name:"父节点13 - 没有子节点", isParent:true}
        ]},
      { name:"父节点2 - 折叠",
        children: [
          { name:"父节点21 - 展开", open:true,
            children: [
              { name:"叶子节点211"},
              { name:"叶子节点212"},
              { name:"叶子节点213"},
              { name:"叶子节点214"}
            ]},
          { name:"父节点22 - 折叠",
            children: [
              { name:"叶子节点221"},
              { name:"叶子节点222"},
              { name:"叶子节点223"},
              { name:"叶子节点224"}
            ]},
          { name:"父节点23 - 折叠",
            children: [
              { name:"叶子节点231"},
              { name:"叶子节点232"},
              { name:"叶子节点233"},
              { name:"叶子节点234"}
            ]}
        ]},
      { name:"父节点3 - 没有子节点", isParent:true}
    ]

格式化后:

简单 JSON 数据

效果图:

image.png

简单模式的 JSON 数据需要使用 id / pId 表示节点的父子包含关系,如使用其他属性设置父子关联关系请参考 setting.data.simple 内各项说明。

[
      { id:1, pId:0, name:"父节点1 - 展开", open:true},
      { id:11, pId:1, name:"父节点11 - 折叠"},
      { id:111, pId:11, name:"叶子节点111"},
      { id:112, pId:11, name:"叶子节点112"},
      { id:113, pId:11, name:"叶子节点113"},
      { id:114, pId:11, name:"叶子节点114"},
      { id:12, pId:1, name:"父节点12 - 折叠"},
      { id:121, pId:12, name:"叶子节点121"},
      { id:122, pId:12, name:"叶子节点122"},
      { id:123, pId:12, name:"叶子节点123"},
      { id:124, pId:12, name:"叶子节点124"},
      { id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},
      { id:2, pId:0, name:"父节点2 - 折叠"},
      { id:21, pId:2, name:"父节点21 - 展开", open:true},
      { id:211, pId:21, name:"叶子节点211"},
      { id:212, pId:21, name:"叶子节点212"},
      { id:213, pId:21, name:"叶子节点213"},
      { id:214, pId:21, name:"叶子节点214"},
      { id:22, pId:2, name:"父节点22 - 折叠"},
      { id:221, pId:22, name:"叶子节点221"},
      { id:222, pId:22, name:"叶子节点222"},
      { id:223, pId:22, name:"叶子节点223"},
      { id:224, pId:22, name:"叶子节点224"},
      { id:23, pId:2, name:"父节点23 - 折叠"},
      { id:231, pId:23, name:"叶子节点231"},
      { id:232, pId:23, name:"叶子节点232"},
      { id:233, pId:23, name:"叶子节点233"},
      { id:234, pId:23, name:"叶子节点234"},
      { id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
    ]

格式化后的json:


目录
相关文章
|
26天前
|
JSON API 数据格式
淘宝商品评论API接口,json数据示例参考
淘宝开放平台提供了多种API接口来获取商品评论数据,其中taobao.item.reviews.get是一个常用的接口,用于获取指定商品的评论信息。以下是关于该接口的详细介绍和使用方法:
|
2月前
|
SQL JSON 数据格式
SPL 处理多层 JSON 数据比 DuckDB 方便多了
esProc SPL 处理多层 JSON 数据比 DuckDB 更便捷,尤其在保留 JSON 层次与复杂计算时优势明显。DuckDB 虽能通过 `read_json_auto()` 将 JSON 解析为表格结构,但面对深层次或复杂运算时,SQL 需频繁使用 UNNEST、子查询等结构,逻辑易变得繁琐。而 SPL 以集合运算方式直接处理子表,代码更简洁直观,无需复杂关联或 Lambda 语法,同时保持 JSON 原始结构。esProc SPL 开源免费,适合复杂 JSON 场景,欢迎至乾学院探索!
|
28天前
|
JSON 定位技术 PHP
PHP技巧:解析JSON及提取数据
这就是在PHP世界里探索JSON数据的艺术。这场狩猎不仅仅是为了获得数据,而是一种透彻理解数据结构的行动,让数据在你的编码海洋中畅游。通过这次冒险,你已经掌握了打开数据宝箱的钥匙。紧握它,让你在编程世界中随心所欲地航行。
125 67
|
3天前
|
JSON Java 数据格式
Spring Boot返回Json数据及数据封装
在Spring Boot中,接口间及前后端的数据传输通常使用JSON格式。通过@RestController注解,可轻松实现Controller返回JSON数据。该注解是Spring Boot新增的组合注解,结合了@Controller和@ResponseBody的功能,默认将返回值转换为JSON格式。Spring Boot底层默认采用Jackson作为JSON解析框架,并通过spring-boot-starter-json依赖集成了相关库,包括jackson-databind、jackson-datatype-jdk8等常用模块,简化了开发者对依赖的手动管理。
29 3
|
1月前
|
JSON 前端开发 应用服务中间件
配置Nginx根据IP地址进行流量限制以及返回JSON格式数据的方案
最后,记得在任何生产环境部署之前,进行透彻测试以确保一切运转如预期。遵循这些战术,守卫你的网络城堡不再是难题。
75 3
|
3月前
|
XML JSON API
如何在 Postman 中上传文件和 JSON 数据
如果你想在 Postman 中同时上传文件和 JSON 数据,本文将带你一步一步地了解整个过程,包括最佳实践和技巧,让你的工作更轻松。
|
3月前
|
JSON JavaScript 前端开发
如何在 Postman 中发送 JSON 数据
我们将深入探讨使用 Postman 发送 JSON 数据这一主题,Postman 是一款强大的 API 测试和开发工具。无论您是经验丰富的开发人员还是新手,掌握这项技能对于高效的 API 测试和开发都至关重要。
|
6月前
|
JSON 缓存 API
解析电商商品详情API接口系列,json数据示例参考
电商商品详情API接口是电商平台的重要组成部分,提供了商品的详细信息,支持用户进行商品浏览和购买决策。通过合理的API设计和优化,可以提升系统性能和用户体验。希望本文的解析和示例能够为开发者提供参考,帮助构建高效、可靠的电商系统。
180 12
|
JSON JavaScript 测试技术
掌握JMeter:深入解析如何提取和利用JSON数据
Apache JMeter教程展示了如何提取和使用JSON数据。创建测试计划,包括HTTP请求和JSON Extractor,设置变量前缀和JSON路径表达式来提取数据。通过Debug Sampler和View Results Tree监听器验证提取结果,然后在后续请求和断言中使用这些数据。此方法适用于复杂测试场景,提升性能和自动化测试效率。
|
11月前
|
存储 JSON API
淘系API接口(解析返回的json数据)商品详情数据解析助力开发者
——在成长的路上,我们都是同行者。这篇关于商品详情API接口的文章,希望能帮助到您。期待与您继续分享更多API接口的知识,请记得关注Anzexi58哦! 淘宝API接口(如淘宝开放平台提供的API)允许开发者获取淘宝商品的各种信息,包括商品详情。然而,需要注意的是,直接访问淘宝的商品数据API通常需要商家身份或开发者权限,并且需要遵循淘宝的API使用协议。
淘系API接口(解析返回的json数据)商品详情数据解析助力开发者