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:


目录
相关文章
|
8天前
|
数据采集 JSON 数据处理
抓取和分析JSON数据:使用Python构建数据处理管道
在大数据时代,电商网站如亚马逊、京东等成为数据采集的重要来源。本文介绍如何使用Python结合代理IP、多线程等技术,高效、隐秘地抓取并处理电商网站的JSON数据。通过爬虫代理服务,模拟真实用户行为,提升抓取效率和稳定性。示例代码展示了如何抓取亚马逊商品信息并进行解析。
抓取和分析JSON数据:使用Python构建数据处理管道
|
13天前
|
JSON JavaScript Java
在Java中处理JSON数据:Jackson与Gson库比较
本文介绍了JSON数据交换格式及其在Java中的应用,重点探讨了两个强大的JSON处理库——Jackson和Gson。文章详细讲解了Jackson库的核心功能,包括数据绑定、流式API和树模型,并通过示例演示了如何使用Jackson进行JSON解析和生成。最后,作者分享了一些实用的代码片段和使用技巧,帮助读者更好地理解和应用这些工具。
在Java中处理JSON数据:Jackson与Gson库比较
|
23天前
|
JSON JavaScript API
(API接口系列)商品详情数据封装接口json数据格式分析
在成长的路上,我们都是同行者。这篇关于商品详情API接口的文章,希望能帮助到您。期待与您继续分享更多API接口的知识,请记得关注Anzexi58哦!
|
15天前
|
JSON API 数据格式
商品详情数据JSON格式示例参考(api接口)
JSON数据格式的商品详情数据通常包含商品的多个层级信息,以下是一个综合多个来源信息的JSON数据格式的商品详情数据示例参考:
|
16天前
|
存储 JSON 前端开发
JSON与现代Web开发:数据交互的最佳选择
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也便于机器解析和生成。它以文本格式存储数据,常用于Web应用中的数据传输,尤其是在客户端和服务器之间。
29 0
|
18天前
|
存储 JavaScript 前端开发
TypeScript :使用mock提供数据&as const 的使用&tsconfig.json配置
本文介绍了如何在项目中使用 Mock 提供数据,包括安装依赖、配置 Vite 和 TypeScript,以及如何使用 `as const`、元组和 tsconfig.json 配置文件。通过这些配置,可以实现更灵活和高效的开发体验。
|
24天前
|
机器学习/深度学习 JSON JavaScript
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
20 0
|
5月前
|
JSON JavaScript 测试技术
掌握JMeter:深入解析如何提取和利用JSON数据
Apache JMeter教程展示了如何提取和使用JSON数据。创建测试计划,包括HTTP请求和JSON Extractor,设置变量前缀和JSON路径表达式来提取数据。通过Debug Sampler和View Results Tree监听器验证提取结果,然后在后续请求和断言中使用这些数据。此方法适用于复杂测试场景,提升性能和自动化测试效率。
139 0
|
3月前
|
存储 JSON API
淘系API接口(解析返回的json数据)商品详情数据解析助力开发者
——在成长的路上,我们都是同行者。这篇关于商品详情API接口的文章,希望能帮助到您。期待与您继续分享更多API接口的知识,请记得关注Anzexi58哦! 淘宝API接口(如淘宝开放平台提供的API)允许开发者获取淘宝商品的各种信息,包括商品详情。然而,需要注意的是,直接访问淘宝的商品数据API通常需要商家身份或开发者权限,并且需要遵循淘宝的API使用协议。
淘系API接口(解析返回的json数据)商品详情数据解析助力开发者
|
25天前
|
JSON JavaScript API
商品详情数据接口解析返回的JSON数据(API接口整套流程)
商品详情数据接口解析返回的JSON数据是API接口使用中的一个重要环节,它涉及从发送请求到接收并处理响应的整个流程。以下是一个完整的API接口使用流程,包括如何解析返回的JSON数据: